原生小程序底部弹出层动画过渡

时间：2019-10-12 10:42:18 阅读：482 评论：0 收藏：0 [点我收藏+]

标签：lse 内容 api ati add port translate pac padding

1.wxml

</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 , 页面执行动画

　　});

原生小程序底部弹出层动画过渡

标签：lse 内容 api ati add port translate pac padding

原文地址：https://www.cnblogs.com/mcll/p/11659981.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行