# 概述
Vue.js动画指令插件,此插件基于animate.css4.x (opens new window)和wow.js (opens new window)实现
# 1、下载依赖
注意：animate.css版本请使用4.x
npm install animate.css v-animated --save
1
# 2、导入
import Vue from 'vue'
import 'animate.css'
import Animated from 'v-animated'
Vue.use(Animated)
// or 参数请参考：https://www.delac.io/wow/docs.html
Vue.use(Animated,{
boxClass: 'wow', // default
animateClass: 'animate__animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3、使用
// 更多动效请查阅：https://animate.style/
<h1 v-animated="'animate__bounce'">v-animated</h1>
或者不用指令直接使用class
<h1 class="wow animate__bounce">v-animated</h1>
1
2
3
4
2
3
4
# 4、源码仓库
https://github.com/Gitsifu/v-animated (opens new window)