Vue使用Animate.css和WOW.js（AOS.js）来实现页面滚动触发动画

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）