1.安装wowjs(WOW.js – 让页面滚动更有趣_dowebok)
在vue中使用：
首先install:
npm install wowjs --save，安装的同时也会安装好animate.css.(Animate中文网 – Animate安装、Animate使用、Animate下载)
2.在main.js中全局引入
import wow from 'wowjs'
import 'animate.css'
Vue.prototype.$wow = wow 全局注册到Vue实例中
3.在你使用wow的页面中初始化。
boxClass：用户滚动时显示隐藏框的类名。
animateClass：触发CSS动画的类名（animate.css库默认为“animated”）
offset：定义浏览器视口底部和隐藏框顶部之间的距离。
当用户滚动并到达这个距离时，隐藏的框被显示出来。
mobile：在移动设备上打开/关闭WOW.js。
live：自动检查页面上的新WOW元素。
mounted(){
this.$AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100
}); AOS初始化
new this.$wow.WOW().init({
boxClass: 'wow',
animateClass: 'animate__animated',
offset: 0,
mobile: true,
live: true
}) WOW初始化
},
4.直接在元素中使用
<div class="ComTit">
<div class="t1 wow animate__animated animate__fadeInRight" data-wow-delay="0.5s" data-wow-iteration= "1" data-wow-duration="0.5s" >BUSINESS CENTER</div>
<div class="t2 wow animate__animated animate__fadeInLeft" data-wow-delay="0.5s" data-wow-iteration= "1" data-wow-duration="0.5s" >业务中心</div>
</div>
注意语法。
class="t1 wow animate__animated animate__fadeInRight"
animate__animated WOW初始化的animateClass
animate__fadeInRight 动画名称，注意动画名称前面加上animate__
动画效果animate.css的使用 - 小火柴的蓝色理想 - 博客园
可以参考这个页面，非常清晰明了，很优秀。
动画时间之类的属性就可以设置了。
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）
