wxml
<view class="modals modals-bottom-dialog" bindtap="hideModal" wx:if="{{value}}">
<view class="modals-cancel" ></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,.5);}
.bottom-dialog-body{position:absolute; z-index:10001; bottom:0; left:0; right:0; padding:30rpx; height:300rpx; background-color: #fff;}
/*動畫前初始位置 !important,千萬不要忘記*/
.bottom-pos{-webkit-transform:translateY(100%);transform:translateY(100%);}
js
Page({
data: {
value: false, //模態框的狀態 true-隱藏 false-顯示
animationData: {},//
},
// 顯示遮罩層
showModal: function () {
var that = this;
that.setData({
value: true
})
var animation = wx.createAnimation({
duration: 600,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快
timingFunction: 'ease',//動畫的效果 默認值是linear
})
this.animation = animation
setTimeout(function () {
that.fadeIn();//調用顯示動畫
}, 200)
},
// 隱藏遮罩層
hideModal: function () {
var that = this;
var animation = wx.createAnimation({
duration: 800,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快
timingFunction: 'ease',//動畫的效果 默認值是linear
})
this.animation = animation
that.fadeDown();//調用隱藏動畫
setTimeout(function () {
that.setData({
value: false
})
},
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(),
})
},
})