wx-wow微信小程序实现wow.js功能(微信小程序动效库)

该项目为提供微信小程序一套便捷好用的动画执行方案，通过添加简单的动画类名和一些简单的参数，即可实现想要的动画效果。灵感来源 WOW.js

wx-wow 需要调试小程序基础库 >2.5

先附上下载地址：点击下载提取码：jqhx

使用：

将shghnn目录中的文件复制到微信小程序目录utils中（wxWOW.js，wxWOW.wxss，wxWOW.wxss）

1. 在 app.js 中引入 wxWOW.js

  Page = require('./utils/wxWOW')App({...})

2. 在 app.wxss 引入wxWOW.wxss ( 动效样式来源自 animate.css)

 /**app.wxss**/@import "./utils/wxWOW.wxss";

3. 在需要的页面引入 wxWOW.wxs 并导出模块命名为 "wx" 同时监听绑定 {{ wxwow }} 改变时触发 WOWChange 函数执行动画渲染。

 <wxs src="../../utils/wxWOW.wxs" module="wx" /><view change:prop="{{wx.WOWChange}}" prop="{{wxwow}}" >...</view>

4. 在需要加入动效的地方的 class 加入 " {{wx.WOW()}} <动效名称>"，例如 " {{wx.WOW()}} bounceInUp "，同时需要给该动效分配一个 id 具体通过 {{wx.WOWId()}} 去自动分配到 data-wx-wow-id 上，并且确保添加动画的display 属性为块状或行块状，不能为行类样式如下面的例子。

<view class=" {{wx.WOW()}} bounceInUp"  data-wx-wow-id="{{wx.WOWId()}}" > ... </view>

额外参数
此外还可以控制动效的一些过程例如:

动画延时： data-wx-wow-delay （ 300ms , 0.3s, 4s ...）

动画持续时间：data-wx-wow-duration （ 300ms , 0.3s, 4s ...）

距离可视区域多少开始执行动画: data-wx-wow-offset (整数) （ 0 , 100, 50 ...）

动画执行次数: data-wx-wow-iteration ( 1, 5, infinite, ...)

<view class="{{wx.WOW()}} bounceInUp"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s" data-wx-wow-offset="500" > ... </view><image src="xxxx.png" class="{{wx.WOW()}} swing"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s" data-wx-wow-offset="500" data-wx-wow-iteration="5" /><view class="{{wx.WOW()}} fadeOut"  data-wx-wow-id="{{wx.WOWId()}}"  data-wx-wow-delay="0.8s"  data-wx-wow-duration="3s" > ... </view>

wx-wow微信小程序实现wow.js功能(微信小程序动效库)相关推荐

微信小程序 — 小程序反馈与建议功能及小程序button按钮去除默认样式
这节给大家讲解小程序反馈与建议功能的实现. 我们做小程序难免会遇到一些未知的问题,这个时候给用户提供一个反馈与建议功能就显得至关重要了.这一节来带领大家实现小程序的反馈与建议功能. 先看效果图还是 ...
前端做微信好友分享_基于js实现微信发送好友如何分享到朋友圈、微博
微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. var imgUrl = "图片地址"; var l ...
c语言程序中的基本功能,c语言程序中的基本功能模块为什么？
c语言程序中的基本功能模块为"函数".一个C语言程序可以由一个主函数和若干个函数构成:一个大的应用程序一般应该分为多个程序模块,每一个模块用来实现一个功能,而模块的功能是由函数完成 ...
微信小程序使用onfire.js（事件订阅和分发JavaScript 库）实现跨页面传参，对onfire的全面了解
开发微信小程序时,页面间数据传送多采用URL方式传参.添加全局变量,对于在本地缓存不大实用(感觉操作缓存,应该性能会有一定的损耗吧).而从新打开的页面回到之前的界面,貌似只有放在本地缓存.添加全局变量 ...
微信小程序客服统计功能：小程序客服能统计考勤和工作量了
小程序客服在小程序运营过程中发挥着--直接对接用户,用户体验,商品变现,体现服务等,我们很有必要对这个数据有所掌握,指导当前工作,优化小程序的整体运营策略. 需要实现的不仅是客服了解自己的工作情况,做 ...
自动点击微信c语言,【Ctrl.js】微信中给微信运动的朋友自动点赞源码
[JavaScript] 纯文本查看复制代码//--------------------------------------------------------------------------- ...
html仿微信语音播放器,原生js仿微信音频播放器
今天看个类似微信音频播放器的效果: 简单使用使用比较简单,直接配置如下: var wx_audio = new WxAudio({ ele: ".wx-audio", title ...
微信 html5禁止拖拽,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页...
大家可能会遇到开发公众号的时候,下来会出来源地址,下面的代码可以解决禁止下拉的问题~ 禁止下拉 .scroll{ position:absolute; overflow:scroll; -webkit ...
css3 局部放大,CSS3/JS 鼠标悬停图片局部放大动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 $('.tile') // tile mouse actions .on('mouseover', func ...

wx-wow微信小程序实现wow.js功能(微信小程序动效库)

使用：

将shghnn目录中的文件复制到微信小程序目录utils中（wxWOW.js，wxWOW.wxss，wxWOW.wxss）

1. 在 app.js 中引入 wxWOW.js

2. 在 app.wxss 引入wxWOW.wxss ( 动效样式来源自 animate.css)

3. 在需要的页面引入 wxWOW.wxs 并导出模块命名为 "wx" 同时监听绑定 {{ wxwow }} 改变时触发 WOWChange 函数执行动画渲染。

wx-wow微信小程序实现wow.js功能(微信小程序动效库)相关推荐

最新文章

热门文章

wx-wow微信小程序实现wow.js功能(微信小程序动效库)

使用：

将shghnn目录中的文件复制到微信小程序目录utils中（wxWOW.js，wxWOW.wxss，wxWOW.wxss）

1. 在 app.js 中引入 wxWOW.js

2. 在 app.wxss 引入wxWOW.wxss ( 动效样式来源自 animate.css)

3. 在需要的页面引入 wxWOW.wxs 并导出模块 命名为 "wx" 同时监听绑定 {{ wxwow }} 改变时触发 WOWChange 函数 执行动画渲染。

wx-wow微信小程序实现wow.js功能(微信小程序动效库)相关推荐

最新文章

热门文章

3. 在需要的页面引入 wxWOW.wxs 并导出模块命名为 "wx" 同时监听绑定 {{ wxwow }} 改变时触发 WOWChange 函数执行动画渲染。