【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/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（动画执行次数）这四个属性可选可不选

6.参数配置说明

属性	类型	默认值	说明
boxClass	string	wow	需要执行动画的元素的 class
animateClass	string	animated	animation.css 动画的 class
offset	int	0	距离可视区域多少开始执行动画
mobile	boolean	true	是否在移动设备上执行动画
live	boolean	true	异步加载的内容是否有效

 

 

 

 

 

 

 

OK，到此你的项目就能使用滚动加载动画了！

有问题欢迎评论指出！