浏览器可视窗口加载 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 | 动画结束 |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent