微信小程序底部弹出模态框

wxml:

<view class="modal modals-bottom-dialog" hidden="{{ hideModal }}">
    <view class="modal-cancel" bindtap="hideModal"></view>
    <view class="bottom-dialog-body bottom-pos" animation="{{ animationData }}"></view>
</view>
<button bindtap="showModal">点击弹出底部模态框</button>

wxss:

/*模态框*/
.modals {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.modals-cancel {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.bottom-dialog-body {
    position: absolute;
    z-index: 10001;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    height: 300rpx;
    background-color: #FFF;
}
/*动画前初始位置*/
.bottom-pos {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

js:

Page({
	data: {
    	hideModal: true, //模态框状态  true-隐藏   false-显示
        animationData: {},
    },
    
    //显示遮罩层
    showModal: function () {
    	var that = this;
        that.setData({
            hideModal: false
        })
        var animation = wx.createAnimation({
        	duration: 600, //动画的持续时间默认600ms，数值越大，动画越慢，数值越小，动画越快。
        })
        
        this.animation = animation
        setTimeout(function () {
            that.fadeIn();    //调用显示画面
        },200)
    },
    
    //隐藏遮罩层
    hideMadal: funtion () {
    	var that = this;
        var animation wx.createAnimation({
            duration: 800, //动画持续时间
            tisdtimingFunction: "ease" //动画效果,默认是linear
         })
         this.animation = animation
         that.fadeDown(); //调用隐藏画面
         setTimeout(function () {
             that.setData({
             hideModal: true
            })
         }, 720) //限制性下滑动画，在隐藏模块
    },
	
    //动画集
    fadeIn: function () {
    	this.animation.translateY(0).step()
        this.setData({
            animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
        })
    },
    
    fadeDown: function () {
    	this.animation.translateY(300).step()
        this.setData({
            animationData: this.animation.export(),
        })
    }
})