微信小程序---弹框渐变动画（wx.createAnimation）

浅浅的花香味﹌ 2022-03-09 15:53 909阅读 0赞

index.wxml

index.wxss:

.bottom {
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 38rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background: #000;
      color: #d1b75e;
      text-align: center;
    }
    /*弹框*/
    
    .maskLayer {
      width: 100%;
      height: 500rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background: #fff;
      color: #333;
      box-shadow: 0 0 50rpx rgba(0, 0, 0, 0.5);
      border-top-right-radius: 30rpx;
      border-top-left-radius: 30rpx;
    }
    
    .maskLayer .main {
      padding-left: 50rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 40rpx;
    }
    .maskLayer .main .title{
      font-size: 40rpx;
    }
    
    .maskLayer .list {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 84%;
      margin: 0 auto;
      margin-top: 40rpx;
    }

index.js

Page({
    
      data: {
        showModalStatus: false,
        animationData: {},
      },  
    // 选择颜色--弹框
      showModal: function() {
        var that = this;
        // 显示遮罩层 
        var animation = wx.createAnimation({
          duration: 300,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: true
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      },
      // 隐藏弹框
      hideModal: function() {
        var that = this;
        // 隐藏遮罩层 
        var animation = wx.createAnimation({
          duration: 300,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false
          })
        }.bind(this), 200)
      },
    })