wx-wow

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

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

仓库地址： @Five-great/wx-wow

下载

直接通过 git 下载 wx-wow 源代码，并将 src 目录拷贝到自己的项目中
``bash
git clone https://github.com/Five-great/wx-wow.git
`

通过 npm 或 cnpm 下载

`bash
npm install --save wx-wow
`
下载后目录结构为
`javscript

+-- src
| |-- wxWOW.js
| |-- wxWOW.wxs
| |-- wxWOW.wxss
| |-- wxWOW.min.js
| |-- wxWOW.min.wxs
| |-- wxWOW.min.wxss
|-- package-lock.json
|-- package.json
+-- README.md

`

使用


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

$3

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

$3

`css
/app.wxss/
@import "./utils/wxWOW.wxss";

`

$3

`javascript



...


`

$3

`html
//例子1：
...
`

#### 额外参数

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

动效名称: data-wx-wow-name (bounceInUp , fadeInLeft,...)

动效延时： 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, ...)


`html
...



...
`


升阶配置

#### 若需升阶配置 则需改变设置方式，在 class 加入 " {{wx.WOW()}}" ,同时加入 data-wx-wow-name="<动效名>" 同时需要给该动效分配一个 id 具体通过 {{wx.WOWId()}} 去自动分配到 data-wx-wow-id 上 ，并且确保添加动画的display 属性为 块状 或行块状，不能为行类样式 如下面的例子2

`html
//例2：
...
`
#### 触发实现离场动效
##### 通过触发 wx.WOWOut() 函数，来触发离场动效，需保证 data-wx-wow-name有值，默认为 data-wx-wow-name中相反的动效名（例如 bounceInUp 相反动效为 bounceOutUp）。触发回调对应逻辑层 wxWOWTap（可以执行跳转页面或其他处理）

`html
...
`

`js
Page({
...
wxWOWTap: function(event){
console.log(event)
setTimeout(()=>{
event.target.dataset.idx?wx.navigateTo({url: '/pages/xxx/xxx?idx='+event.target.dataset.idx}):''
},600)
}
...
})
`
##### 可选配置

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

动效名称: data-wx-wow-outName [默认data-wx-wow-name取相反动效 ] (bounceOutUp , fadeOutLeft,...)

动效延时： data-wx-wow-outDelay [默认与 data-wx-wow-delay 相同 ] （ 300ms , 0.3s, 4s ...）

动效持续时间：data-wx-wow-outDuration [默认与 data-wx-wow-duration 相同 ] （ 300ms , 0.3s, 4s ...）

动效执行次数: data-wx-wow-outIteration [默认与 data-wx-wow-iteration 相同 ] ( 1, 5, infinite, ...)

#### 设置页面重复动效 （进入页面重新刷新执行动效）

`js
Page({
data: {
wxwowConfig: {
repeat: true //是否重复刷新开启动画 默认 true , 当设为 false，则该页面未销毁前，只会执行一次动效
}
}
})
`

#### 其他设置
###### 设置某单个动效，重复执行（优先级高于设置页面重复动效），给 类名 class 加入 wxwow-repeat

`html
...
`

###### 设置某单个动效，仅仅执行一次（优先级高于设置页面重复动效），给 类名 class 加入 wxwow-once

`html
...
``

Demo

点击查看代码片段

应用实列

支持

欢迎 点赞 ，Fork , 提 Issues

qq邮箱： fivecc@qq.com