微信小程序动画组件使用解析,类似vue,且更强大


Posted in Javascript onAugust 01, 2019

演示

演示1

微信小程序动画组件使用解析,类似vue,且更强大

演示2

微信小程序动画组件使用解析,类似vue,且更强大

演示3

微信小程序动画组件使用解析,类似vue,且更强大 

一、功能描述

1、预设过渡

  • 支持区分enter、leave
  • 支持预设过渡的组合
  • 特别强调:支持元素展开、闭合的过渡。name=='slide'或['slide'[,]],即可实现,无需外部传height
  • 支持外部传类来过渡或动画
/* 预留过渡 */
/**
*1、fade
*2、移动:up,right,down,left四个方向
*3、scale缩放:默认是从0->1,还预设了一个从1->1.2的
*4、rotate旋转。顺时针旋转。角度用以上方向来指示。如果逆时针中间加上reserve。
如rotate-right表示选择180度,rotate-down-reserve表示逆时针旋转90度。
预设了,90,180,270,360;-90.-180,-270,-360角度的旋转
*5、slide:内容块张开还是隐藏。 √

*说明:以上是整体过渡的单元:传name的时候,可以多个组合,形成更加复杂的过渡。
*如果这些组合,还不够你的使用,可以部分或全部过渡通过外部传类来实现。
*/

2、蒙层相关功能

  • 无蒙层:mask:0。//此时过渡元素为卡槽
  • 透明蒙层1:mask:1。//此时过渡元素为卡槽。如:左移100%,只是移动卡槽宽度的100%
  • 透明蒙层2:mask:2。//此时过渡元素为蒙层。如:左移100%,则是移动蒙层宽度的100%
  • 半透明蒙层3:mask:3。///此时过渡元素为蒙层。如:弹窗上移,则是蒙层上移。
  • 半透明蒙层4:mask:4。///此时过渡元素为卡槽。如:弹窗上移,则是蒙层自身是缩放。卡槽上移

3、卡槽样式完美设置

  • 由以上可知。蒙层由多种情况。但
  • 完美支持百分比设置:外部传custom-class即可

4、其它细节

  • 完美支持自定义top、tab导航情况
  • 蒙层(包括透明蒙层)下,预设5个布局位置:结合方向等,可实现左右抽屉、上下弹出、中间淡入淡出等效果
  • 支持leave动画结束后,通知父节点:可实现多节点联动。如:手风琴效果

5、支持所有的节点。包括组件作为卡槽内容

  • 对需要动画的元素/组件套上这个组件即可实现过渡动画
  • 其实整个小程序页面做进入过渡,也挺炫酷的。类似支付宝页面进蚂蚁森林

二、可传属性(可配置项)

过渡相关类

externalClasses: [
'enter-class',
'enter-active-class',
'enter-to-class',
'leave-class',
'leave-active-class',
'leave-to-class',
],

内容(卡槽)样式

externalClasses:[
'custom-class',
]

说明:完美支持像素、百分比、或者absolute的设置

配置项

properties: {
name: {
type: [String,Object,Array],//支持区分enter、leave过渡
value:{
enter:{
type:[String,Array],
value:['up','fade'],//支持传数组,即内设的过渡,可组合
},
leave:"fade"
 }
},
show: {
 type: Boolean,
 value: false
},
duration: { //run Time ms
 type: [String,Number,Object],//`过渡时间,支持区分enter、leave。如果enter不需要过渡,enter:0即可`
 value:{
  enter:300,
  leave:300,
 }
},
//leave过渡之后状态是否保留。而不是display:none
//带有mask,避免影响页面操作。这边强制禁止保留状态。适用于非mask的情况。mask:0和1、2(1、2是全透明的,设置了属性虽然不会影响页面操作。建议不宜保留)
retain:{
 type:Boolean,
 value:false
},
mask: { //`支持选蒙层类型:预设5中类型` 以下四个个是配套的,针对mask的配置
 type: [String,Number],//如果为0,表示没有蒙层。1、2:全透明蒙层
 value: '0',
},
//顶部的margin。如果没有自定义navBar或tabBar则,fixed区域为中间的可视区域。否则为中间可视区域+自定义bar区域。
//因此为了兼容,如果自定义了bar,则要传值进来修正蒙层的区域。
margin:{//记得带上单位哦。
 type: Object,
 value:{
  top:'0px',
  bottom:'0px',}
},
position: { //`支持卡槽位置:top、right、bottom、left、center`如果有mask,则mask中的卡槽位置是哪里。如果要再偏移,则外部卡槽使用margin来实现即可
 type: String,
 value: "right",
},
close: { //如果有mask,点击Mask是否关闭蒙层
 type: Boolean,
 value: false
}

三、完整代码(demo)

git代码

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

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
iview table高度动态设置方法
Mar 14 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 #Javascript
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
详解package.json版本号规则
Aug 01 #Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 #Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 #Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 #Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 #Javascript
You might like
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python中模块string.py详解
2017/03/12 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python打开音乐文件的实例方法
2020/07/21 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
应届生污水处理求职信
2013/11/06 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
倡议书的写法
2014/08/30 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
python_tkinter事件类型详情
2022/03/20 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android