微信小程序实现消息框弹出动画


Posted in Javascript onApril 18, 2020

微信小程序动画之消息框弹出,供大家参考,具体内容如下

上图

微信小程序实现消息框弹出动画

js:

Page({
 data: {
 showModalStatus: false
 },
 powerDrawer: function(e) {
 var currentStatu = e.currentTarget.dataset.statu;
 this.util(currentStatu)
 },
 util: function(currentStatu) {
 /* 动画部分 */
 // 第1步:创建动画实例 
 var animation = wx.createAnimation({
  duration: 300, //动画时长 
  timingFunction: "linear", //线性 
  delay: 0 //0则不延迟 
 });

 // 第2步:这个动画实例赋给当前的动画实例 
 this.animation = animation;

 // 第3步:执行第一组动画 
 animation.opacity(0).rotateY(100).step();

 // 第4步:导出动画对象赋给数据对象储存 
 this.setData({
  animationData: animation.export()
 })

 // 第5步:设置定时器到指定时候后,执行第二组动画 
 setTimeout(function() {
  // 执行第二组动画 
  animation.opacity(1).rotateY(0).step();
  // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 
  this.setData({
  animationData: animation
  })

  //关闭 
  if (currentStatu == "close") {
  this.setData({
   showModalStatus: false
  });
  }
 }.bind(this), 200)

 // 显示 
 if (currentStatu == "open") {
  this.setData({
  showModalStatus: true
  });
 }
 }

})

wxml:

<!--button-->
<view class="btn bubble" bindtap="powerDrawer" data-statu="open">登录</view>

<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">

 <!--drawer content-->
 <view class="drawer_title">消息框</view>
 <view class="drawer_content">
 </view>
 <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
</view>

wxss:

/*button*/

.btn {
 width: 80%;
 padding: 20rpx 0;
 border-radius: 10rpx;
 text-align: center;
 margin: 40rpx 10%;
 background: #07c160;
 color: #fff;
}

/*mask*/

.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 background: #000;
 opacity: 0.4;
 overflow: hidden;
}

/*content*/

.drawer_box {
 width: 650rpx;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 1001;
 background: #fafafa;
 margin: -150px 50rpx 0 50rpx;
 border-radius: 3px;
}

.drawer_title {
 padding: 15px;
 font: 20px "microsoft yahei";
 text-align: center;
}

.text {
 font: 20px "microsoft yahei";
 text-align: center;
}

.drawer_content {
 height: 80px;
 overflow-y: scroll; /*超出父盒子高度可滚动*/
}

.btn_ok {
 padding: 10px;
 font: 20px "microsoft yahei";
 text-align: center;
 border-top: 1px solid #e8e8ea;
 color: #3cc51f;
}

.bottom {
 padding-bottom: 20px;
}

.bubble {
 position: relative;
 overflow: hidden;
}

.bubble:after {
 content: "";
 background: #999;
 position: absolute;
 width: 750rpx;
 height: 750rpx;
 left: calc(50% - 375rpx);
 top: calc(50% - 375rpx);
 opacity: 0;
 margin: auto;
 border-radius: 50%;
 transform: scale(1);
 transition: all 0.4s ease-in-out;
}

.bubble:active:after {
 transform: scale(0);
 opacity: 1;
 transition: 0s;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
javascript实现列表切换效果
May 02 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
前端Electron新手入门教程详解
Jun 21 #Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
js事件触发操作实例分析
Jun 21 #Javascript
微信小程序实现下拉刷新动画
Jun 21 #Javascript
You might like
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
js indexOf()定义和用法
2012/10/21 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python 对象和json互相转换方法
2018/03/22 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python3 max()函数基础用法
2019/02/19 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python新手学习装饰器
2020/06/04 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
大学秋游活动方案
2014/02/11 职场文书
体育比赛口号
2014/06/09 职场文书
安全目标管理责任书
2014/07/25 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
人事局接收函
2015/01/31 职场文书
爱国主义主题班会
2015/08/14 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技