![JS gzip size](https://camo.githubusercontent.com/02cb19451c303558b5f85b99fb16588da7f144361194d5f86def943b1c88ed14/687474703a2f2f696d672e626164676573697a652e696f2f68747470733a2f2f756e706b672e636f6d2f7675652d776f772f646973742f7675652d776f772e6d696e2e6a733f636f6d7072657373696f6e3d677a6970266c6162656c3d677a697025323073697a653a2532304a53267374796c653d666c61742d737175617265)
浏览器可视窗口加载 DEMO地址
npm install vue-wow --save
// import
import Vue from 'vue'
import VueWow from 'vue-wow'
// mount with global
Vue.use(VueWow)
// mount with component
import {UAnimateContainer, UAnimate} from 'vue-wow'
export default {
components: {
UAnimateContainer,
UAnimate
}
}
<template>
<u-animate-container>
<u-animate
name="fadeIn"
delay="0s"
duration="1s"
:iteration="1"
:offset="0"
animateClass="animated"
:begin="false"
>
测试
</u-animate>
</u-animate-container>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
Name |
Type |
Default |
Description |
name |
String |
'' |
组件动画的名称class(推荐填写animate.css,如fadeIn) |
el |
String |
'div' |
组件渲染标签 |
duration |
String |
1s |
动画持续时间 |
delay |
String |
0s |
动画延迟时间 |
iteration |
Number |
1 |
动画运行次数 |
offset |
Number |
0 |
距离可视区域多少开始执行动画(begin参数必须为false时有效) |
animateClass |
String |
'animated' |
animation.css 动画的 class |
begin |
Boolean |
false |
是否立即执行 忽略屏幕位置计算 |
Name |
Parameters |
Description |
start |
this |
动画开始 |
end |
this |
动画结束 |