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;
}
 

 // 領取優惠券
  takeCoupon:function(e){
    this.setData({
      LayerBoxHeight:'100%'
    })
    this.createMaskShowAnim();
    this.createContentShowAnim();
  },
  // 領取優惠券關閉
  takeCouponClose:function(){
    this.setData({
      'LayerBoxHeight':'0'
    })
    this.createMaskHideAnim();
    this.createContentHideAnim();
  },
 

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(),
      });
    },
  },
};