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


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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
JavaScript 事件系统
Jul 22 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
JS判断数组那点事
Oct 10 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
谈谈node.js中的模块系统
Sep 01 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
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
django 控制页面跳转的例子
2019/08/06 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
如何基于python实现脚本加密
2019/12/28 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
公司会议策划方案
2014/05/17 职场文书
会议室标语
2014/06/21 职场文书
体检通知范文
2015/04/21 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
PYTHON InceptionV3模型的复现详解
2022/05/06 Python