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


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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
前端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
第十一节 重载 [11]
2006/10/09 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python Gunicorn服务器使用方法详解
2019/07/22 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
用python实现名片管理系统
2020/06/18 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
类和结构的区别
2012/08/15 面试题
Java如何支持I18N?
2016/10/31 面试题
小学生安全保证书
2014/02/01 职场文书
2014年团总支工作总结
2014/11/21 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python