Vue+animate.css+wow.js页面滚动动画

animate.css
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。animate.css中文网

wow.js
滚动时显示动画。wow.js官网

1、通过cnpm安装wow.js和animate.css

cnpm install wowjs --save-dev

cnpm install animate.css --save

2.在main.js里配置animate

import animated from 'animate.css'
Vue.use(animated)

3、在需要的组件中引用wow.js

import { WOW } from 'wowjs'

4、在生命周期里中初始化wow.js

mounted(){
var wow = new WOW({
	boxClass: 'wow',    //需要执行动画元素的Class
	animateClass: 'animated',    //animation.css动画的Class
	offset: 0,    //距离可视区域多少开始执行动画
	mobile: true，    //是否在移动设备执行动画
	live: true    //异步加载的内容是否有效
	})
	wow.init();
}

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）