微信小程序弹出层的实现（动画）

1. 弹出层wxml页面结构

 <view class='couponLayerBox' animation="{{animMaskData}}" style='height:{{LayerBoxHeight}};'></view>
  <view class='couponLayer' animation="{{animContentData}}">
      <view class='title'>
         <image class='couponIcon' src='https://wximg.youtasc.com/icon_coupon.png'></image>
         <text>领取优惠券</text>
         <view class='close' bindtap='takeCouponClose'> <image src='https://wximg.youtasc.com/close.png'></image></view>
      </view>
      <template is="coupon" data="{{coupons:orderData.coupons}}"></template>
    </view>
</view>

2. 弹出层wxss样式

.couponLayerBox{
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top:0rpx;
  left: 0rpx;
  opacity: 0;
}
.couponLayer{
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0rpx;
  bottom: 0rpx;
  height: 887rpx;
  z-index: 11;
  transform:translateY(100%);

}
.couponLayer .title{
  height: 87rpx;
  line-height: 87rpx;
  padding:0 25rpx;
  border-bottom: 1rpx solid #e6e6e6;
  margin-bottom: 50rpx;
}
.couponLayer .title .couponIcon{
  width: 44rpx;
  height: 33rpx;
  margin-right: 18rpx;
}
.couponLayer .title text{
  font-size: 28rpx;
  color: #363636;
}
.couponLayer .title .close{
  padding:20rpx;
  width: 22rpx;
  height: 22rpx;
  float: right;
  margin-top: 10rpx;
}
.couponLayer .title .close image{
  margin-bottom: 30rpx;
}

3. 弹出层js
   在js文件中引入封装好动画的模块，通过this.*使用其中的方法。
   引入方法见：https://blog.csdn.net/weixin_41257563/article/details/82792194

 // 领取优惠券
  takeCoupon:function(e){
    this.setData({
      LayerBoxHeight:'100%'
    })
    this.createMaskShowAnim();
    this.createContentShowAnim();
  },
  // 领取优惠券关闭
  takeCouponClose:function(){
    this.setData({
      'LayerBoxHeight':'0'
    })
    this.createMaskHideAnim();
    this.createContentHideAnim();
  },

4. 弹出层封装共用动画方法页面
   在utils文件中新建一个文件用来封装动画方法。
   封装方法见：https://blog.csdn.net/weixin_41257563/article/details/82792194

export default {
  data: {
    animMaskData: [],
    animContentData: [],
  },
  animOp: {
    createMaskShowAnim() {
      const animation = wx.createAnimation({
        duration: 200,
        timingFunction: 'cubic-bezier(.55, 0, .55, .2)',
      });

      this.maskAnim = animation;

      animation.opacity(1).step();
      this.setData({
        animMaskData: animation.export(),
      });
    },
    createMaskHideAnim() {
      this.maskAnim.opacity(0).step();
      this.setData({
        animMaskData: this.maskAnim.export(),
      });
    },
    createContentShowAnim() {
      const animation = wx.createAnimation({
        duration: 200,
        timingFunction: 'cubic-bezier(.55, 0, .55, .2)',
      });
      this.contentAnim = animation;
      animation.translateY(0).step();
      this.setData({
        animContentData: animation.export(),
      });
    },
    createContentHideAnim() {
      this.contentAnim.translateY('100%').step();
      this.setData({
        animContentData: this.contentAnim.export(),
      });
    },
  },
};