小程序使用wx.createAnimation和fadein实现弹出动画效果

<view>
  <view bindtap="openPopup">
    点击</view>
  <view hidden="{{popup}}">
    <view class="huise" bindtap="splicPopup"></view>
    <view class="popup fadein" animation="{{animationData}}">

    </view>
  </view>
</view>
.huise {
  width: 100%;
  height: 100%;
  background: #000;
  position: fixed;
  top: 0;
  opacity: 0.70;
  z-index: 49;
}

.popup {
  position: fixed;
  right: 0;
  width: 70%;
  background: #fff;
  height: 100%;
  top: 0;
  z-index: 50;
}
.fadein {
  animation: fadein 0.5s;
}

@keyframes fadein {
  0% {
    transform: translate(100%, 0);
  }

  100% {
    transform: none;
  }
}
  data: {
    popup: true,
    animationData: {},
  },
  
fadeIn() {
    this.animation.translateX(0).step()
    this.setData({
      animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
    })
  },
  fadeDown() {
    this.animation.translateX(600).step()
    this.setData({
      animationData: this.animation.export(),
    })
  },
  // 关闭弹窗
  splicPopup() {
    var that = this;
    var animation = wx.createAnimation({
      duration: 800, //动画的持续时间 默认400ms   数值越大,动画越慢   数值越小,动画越快
      timingFunction: 'ease', //动画的效果 默认值是linear
    })
    this.animation = animation
    that.fadeDown(); //调用隐藏动画   
    setTimeout(function() {
      that.setData({
        popup: true
      })
    }, 220) //先执行下滑动画,再隐藏模块
  },
  // 点击打开弹窗标签
  openPopup() {
    let that = this
    this.setData({
      popup: false
    })
    var animation = wx.createAnimation({
      duration: 600, //动画的持续时间 默认400ms   数值越大,动画越慢   数值越小,动画越快
      timingFunction: 'ease', //动画的效果 默认值是linear
    })
    this.animation = animation
    setTimeout(function() {
      that.fadeIn(); //调用显示动画
    }, 200)
  },
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 护眼 设计师: 闪电赇
应支付0元
点击重新获取
扫码支付

支付成功即可阅读