微信小程序之 动画 —— 自定义底部弹出层

wxml：

<view class='buy' bindtap='showBuyModal'>立即购买</view>

<!-- 点击立即购买 弹出购买遮罩层 -->
<view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view>

<!-- 点击立即购买 弹窗 -->
<view animation="{{animationData}}" class="buy_box" wx:if="{{showModalStatus}}">
    <view class='title'>{{detail.detail.title}} <text style='color:red;'>￥{{detail.price}}</text> </view>
    <view class='num'>
        <text style='padding-right:40rpx;'>购买数量：</text>
        <text class='set'>-</text>
        <text class='set'>1</text>
        <text class='set'>+</text>
    </view>
    <button type="primary" bindtap="primary" bindtap='hideBuyModal'> 确定 </button>
</view>

wxss:

.cover_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.buy_box {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding: 20rpx;
  overflow: hidden;
}
.buy_box .title {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333;
    padding: 20rpx 0;
}
.buy_box .num {
    font-size: 28rpx;
    color: #333;
    padding: 40rpx 0;
}
.buy_box .num .set {
    display: inline-block;
    height: 40rpx;
    width: 60rpx;
    text-align: center;
    line-height: 40rpx;
    border:1px solid #444;
    margin-right:2rpx;
    border-radius:8rpx;
}

js

// pages/detail/detail.js
Page({
    data: {
        showModalStatus: false
    },
    
    onLoad: function (options) {
        console.log(options.id)
    },

    plus () {
        let num = this.data.buyNum;
        num++;
        this.setData({
            buyNum: num
        })
    },

    delete () {
        let num = this.data.buyNum;
        if(num > 1) {
            num--;
        } 
        this.setData({
            buyNum: num
        })
    },

    showBuyModal () {
        // 显示遮罩层
        var animation = wx.createAnimation({
            duration: 200,
            /**
              * http://cubic-bezier.com/ 
              * linear 动画一直较为均匀
              * ease 从匀速到加速在到匀速
              * ease-in 缓慢到匀速
              * ease-in-out 从缓慢到匀速再到缓慢
              * 
              * http://www.tuicool.com/articles/neqMVr
              * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
              * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
              */
            timingFunction: "ease",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(), // export 方法每次调用后会清掉之前的动画操作。
            showModalStatus: true
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export()  // export 方法每次调用后会清掉之前的动画操作。
            })
            console.log(this)
        }, 200)
    },
    
    hideBuyModal () {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "ease",
            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
            })
            console.log(this)
        }.bind(this), 200)
    },
})