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>