小程序彈窗動畫

wxml代碼如下

<view wx:if="{{markStatus}}" class='mark'>
  <view class='approval-box bottom-pos' animation="{{animationData}}">
    <view class='mark-title flex-sb plr30'>
      <view bindtap='cancelMark' class='fs28'>取消</view>
      <view class='fs28 colorQgreen'>確認</view>
    </view>
    <view class='mark-content plr30'>
       //自己的彈出內容
      </view>
    </view>
  </view>
</view>

wxss代碼如下

.mark{
  position: fixed;
  background: rgba(0, 0, 0, .5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}
.bottom-pos{-webkit-transform:translateY(100%);transform:translateY(100%);}
.approval-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
}

js代碼如下

Page({

	  /**
	   * 頁面的初始數據
	   */
	  data: {
	    markStatus: false,
	    animationData: {},//彈層動畫
	  },

	  /**
	   * 生命週期函數--監聽頁面加載
	   */
	  onLoad: function (options) {
	
	  },
	markShow: function(){
	    this.setData({
	      markStatus: true,
	      textareaTf: true,
	    })
	    var animation = wx.createAnimation();
	    this.animation = animation
	    this.fadeIn();
	  },
	  cancelMark: function(){
	    var that = this;
	    this.setData({
	      textareaTf: false
	    })
	    var animation = wx.createAnimation();
	    this.animation = animation
	    that.fadeDown(); 
	    setTimeout(function () {
	      that.setData({
	        markStatus: false
	      })
	    }, 300)
	  },
	  fadeIn: function () {
	    this.animation.translateY(0).step();
	    this.setData({
	      animationData: this.animation.export()
	    })
	  },
	  fadeDown: function () {
	    this.animation.translateY(300).step();
	    this.setData({
	      animationData: this.animation.export(),
	    })
	  }, 
  })