原生小程序底部弹出层动画过渡
Posted 旺仔小裤头
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生小程序底部弹出层动画过渡相关的知识，希望对你有一定的参考价值。
1.wxml
<view class="my-dialog" >
<view class="my-mask" bindtap="confirmDialog" hidden="{{!showDialog}}" ></view>
<view class="my-container" animation="{{animatheightadd}}"></view>
</view>
2.wxss
.my-dialog {
opacity: 1;
}
.my-dialog .my-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.my-dialog .my-container {
position: fixed;
width: 90%;
padding: 30rpx 5%;
bottom: 0;
left: 0;
background:#fff;
overflow: hidden;
z-index: 5000;
}
3.js
data:{
animatheightadd:{},
showDialog:false
}
onReady: function () {
//定义动画
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: ‘ease‘
})
//先隐藏内容
this.animation.translateY(331).step()
this.setData({
animatheightadd: this.animation.export()
})
},
refuse：function(){
//显示底部弹出层
this.animation.translateY(0).step()
this.setData({
animatheightadd:this.animation.export()
})
this.setData({
showDialog: true
})
}
confirmDialog: function (e) {
//隐藏底部
this.setData({
showDialog: false
})
this.animation.translateY(331).step()
this.setData({
animatheightadd:this.animation.export() //导出动画api , 页面执行动画
});
},
以上是关于原生小程序底部弹出层动画过渡的主要内容，如果未能解决你的问题，请参考以下文章
使用movable-view制作可拖拽的微信小程序弹出层效果。
在 UINavigationController 中定义自定义过渡动画器时锚定键盘，如 iMessage 应用程序