自定义实现小程序的动画弹框/提示框（微信小程序自定义弹框）

自定义实现小程序的动画弹框/提示框（微信小程序自定义弹框）

微信小程序开发

栏目介绍如何自定义实现小程序动画弹框/提示框。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

前言

在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等

如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库

怎么手动原生方式去实现呢,最主要的是怎么去实现动画

css3 实现动画

如下是wxml代码

弹出底部弹出框 弹出顶部提示框 底部弹出内容 通知内容-

/* pages/customalertbox/customalertbox.wxss */.click-btn { width: 120px; height: 40px; line-height: 40px; text-align: center; margin: 20px auto; border: 1px solid #ccc; border-radius: 5px;}--box { width: 100%; height: 30px; background: #f56c6c; border-radius: 0 0 8px 8px; color: #fff; text-align: center; line-height: 30px; font-size: 28rpx; position: absolute; top: 0px; left: 0; animation-duration: 0.5s; animation-name: slidetop;}.mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5);}.pop { position: absolute; width: 100%; height: 180px; background: #42b983; border-radius: 8px 8px 0 0; position: absolute; bottom: 0px; animation-duration: 0.5s; animation-name: slidein;}@keyframes slidein { from { transform: translateY(70%); } to { transform: translateY(0); }}@keyframes slidetop { from { transform: translateY(-30px); } to { transform: translateY(0px); }}-

// pages/customalertbox/customalertbox.jsPage({ /** * 页面的初始数据 */ data: { isBottom: false, isTop: false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, onBottomBox() { this.setData({ isBottom: true, }); }, onHideBox() { this.setData({ isBottom: false, }); }, onTopBox() { this.setData({ isTop: true, }); setTimeout(() => { this.setData({ isTop: false, }); }, 2000); },});-

.pop { /* ... */ animation-duration: 0.5s; animation-name: slidein; // 动画的名称}@keyframes slidein { // 定义动画的名称 from { transform: translateY(70%); // 平移,垂直方向上 } to { transform: translateY(0); }}--box { /* ... */ animation-duration: 0.5s; animation-name: slidetop;}@keyframes slidetop { from { transform: translateY(-30px); } to { transform: translateY(0px); }}-

通过 css3 中的@keyframes以及变换transform,垂直方向上平移,实现动画

示例效果如下所示

掘金不支持gif-实例效果可戳链接

以上是通过css3的动画animation结合@keyframes动画帧实现的,那么在小程序当中,也可以通过官方的动画API实现的

小程序动画 API-实现动画

创建一个动画实例 animation,调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

示例效果如下所示

掘金不支持gif-实例效果可戳链接

如下是实例代码

弹出底部弹出框 弹出顶部提示框 底部弹出内容 通知内容-

主要是给想要添加动画的元素添加了一个animation属性,现在的动画是通过js去控制,而非css

如下代码所示

以上就是通过微信小程序中动画API实现的完成的动画,代码要比 css3 要多一些,可以实现更加复杂的动画效果

注意

如果是底部弹出框,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="true"即可解决

弹出底部弹出框 底部弹出内容 通知内容-

结语

在小程序当中实现动画可以用css3的animation结合@keyframes实现,同样也可以通过小程序动画的api去实现

相关免费学习推荐：微信小程序开发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。