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)