1.准备两个工具库：
（1.1） animate.css：动画库
（动画效果展示：Animate.css | A cross-browser library of CSS animations.）
（1.2）wowjs: 负责滚动到可视化区域，展示animate.css动画
2.代码实现
（2.1）插件安装
npm install wowjs --save-dev
npm install animate.css --save
（2.2）main.js添加代码
//动画
// 使用样式库
import animated from 'animate.css';
Vue.use(animated);
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 50, // default
mobile: true, // default
live: false,
// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
});
（2.3）在需要执行动画的xx.vue文件代码
<template>
<li class="wow animate__animated animate__fadeInRight">
<!-- 需要执行的动画内容 -->
</li>
</template>
<script>
export default {
name: 'News',
mounted() {
this.$nextTick(() => {
this.$wow.init()
})
}
}
</script>
3.wowjs简单属性介绍
属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效
（3.1）offset为0时，设置动画的元素在出现在浏览器可视区域时执行动
（3.2）完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可
<div class="wow animate__animated animate__fadeIn">900</div>
wow 为配置中的动画类名，必要！
animate__animated animate__fadeIn 为animate.css 的动画效果
1. 自定义动画持续时间
添加 data-wow-duration="2s"
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>
2. 自定义动画延迟时间
添加 data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>
3. 自定义滚动距离
添加 data-wow-offset="200" 效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>
4. 自定义动画重复次数
添加 data-wow-iteration="2" 效果：动画会连续播放2次
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>
若想动画无限重复播放，则使用 data-wow-iteration="infinite"
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>
