微信小程序之自定义底部弹出框动画
2024-08-26 13:27:57
最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框。
wxml
<view class="modals modals-bottom-dialog" hidden="{{hideModal}}">
<view class="modals-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:; top:; left:; right:; bottom:;}
.modals-cancel{position:absolute; z-index:; top:; left:; right:; bottom:; background-color: rgba(0,0,0,.5);}
.bottom-dialog-body{position:absolute; z-index:; bottom:; left:; right:; 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,//动画的持续时间 默认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({
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(),
})
},
})
转 : https://www.jianshu.com/p/cea2d4dc24d1
最新文章
- sql拼音简写函数
- 虚函数列表: 取出方法 // 虚函数工作原理和(虚)继承类的内存占用大小计算 32位机器上 sizeof(void *) // 4byte
- 基于webrtc的资源释放问题(一)
- 从某一日期开始过day天的日期
- bzoj 1911 [Apio2010]特别行动队(斜率优化+DP)
- IOS中UITableViewCell的重用机制原理
- 采用truelicense进行Java规划license控制 扩展可以验证后,license 开始结束日期,验证绑定一个给定的mac住址
- 使用gulp编译sass
- ASP.NET Core Web 资源打包与压缩
- 136. Single Number【LeetCode】异或运算符,算法,java
- PHP基础与JS操作的区别
- Spring Date Jpa on update current_timestamp 自动维护创建时间和更新时间
- JSON序列化时消除空格
- node.js面向对象实现(二)继承
- 启发式合并&;线段树合并/分裂&;treap合并&;splay合并
- 自定义Directive使用ngModel
- jquery实现分页+单删批删
- Oracle 导入导出 dmp 文件
- 20170706wdVBA正则表达式提取题目
- grunt入门讲解4:如何创建task(任务)