【vue】用WOW.js+animate.css实现页面滚动加载元素动画

一、场景

在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 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