一、场景
在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画
二、引入和使用
引入和使用分为两种，一种是标签直接引入即可，另外一种就是 vue-cli 搭建的项目用npm安装引入
第一种很简单，不过多介绍，主要说 vue-cli 中的引入
1.npm 安装 wow.js，安装后 animate.css 会自动安装
npm install wowojs --save-dev
2.在 main.js 中引入 animate.css
import 'wowjs/css/libs/animate.css'
可以根据文件路径进去看一下它所提供的动画类名，我看了下动画效果不是特别的全面，如果没有你想使用的可以在里面自定义或者手动安装 animate.css
npm install animate.css --save
然后引入的时候直接引入就可以了
import 'animate.css'
3.在需要的组件中引入 wow.js
import { WOW } from 'wowjs'
4.在 mounted() 生命周期钩子中初始化
var wow = new WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true})wow.init();
5.在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class即可，还可以加上data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选
<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>
6.参数配置说明
OK，到此你的项目就能使用滚动加载动画了！
有问题欢迎评论指出！
