【前端动画库】在Vue中使用Animate.css和Wow.js

官网

animate动画库官网
wowjs官网
animate是一个动画库，只需要在组件中引入class即可使用，wowjs可以让animate动画组件只在轮动显示出来时才展示动画，而不是在页面刷新时立即展示动画。

1 下载

npm install animate.css --save
npm install wowjs --save

2 配置

在main.js中引入

// wowjs
// import 'wowjs/css/libs/animate.css'
import 'animate.css'
import wow from 'wowjs'
Vue.prototype.$wow = wow

3 使用

在vue页面中

import {WOW} from 'wowjs'

在vue的mounted()方法中添加：

new WOW().init()

在需要动画的组件中添加如下css类：

class="wow animate__animated animate__fadeInDown"

其他动画，只需查看官网修改animate__fadeInDown即可