vue+animate.css+vant 实现移动端上下滚动重复执行动画

背景：做的是一个类似网易云 "年终报告" 的H5页面，利用了vant2的van-swipe轮播组件。

思路：

刚开始是看了相关的文章，试图利用wow.js插件去实现，wow.js的实现方式是基于监控滚动距离去更新动画的。但是因为我利用了van-swipe的组件，无论怎么滑动，滚动距离都是0。 然后就从其他方面下手，通过van-swipe的change事件去拿到当前的轮播页索引，通过索引去动态获取ref,再去拿到ref下的css类名去更新动画。

实现：

第一步：
npm 安装 wow.js，安装后 animate.css 会自动安装

npm install wowjs --save-dev

第二步：
在main.js里引入animate.css

import animated from 'animate.css' 
Vue.use(animated)

第三步： 在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class 即可，还可以加上 data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和 data-wow-iteration（动画执行次数）这四个属性可选可不选

<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>

参数说明：

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

附上功能代码：

<van-swipe :loop="false" vertical :show-indicators="false" @change="changeIndex" ref="mySwipe" style="height:100vh">
      <van-swipe-item>
        <div class="swip1" ref="swip1">
          <div class="animate__animated animate__bounce introduce">111</div>
        </div>
      </van-swipe-item>
 </van-swipe>

changeIndex(index){
      //animate.css的动画类名
      let classList = [
        'animate__bounce',
        'animate__fadeInDown',
        'animate__flip',
        'animate__slideInLeft',
        'animate__fadeIn',
        'animate__flipInX',
        'animate__flipInY',
        'animate__zoomIn',
        'animate__fadeInLeft',
        'animate__lightSpeedInRight',
        'animate__bounceIn',
        'animate__swing',
        'animate__headShake'
      ]
      //动态更新执行动画
      //通过遍历拿到每一个类名
      classList.forEach((cls)=>{
      //要确保拿到的一定是一个数组
      //this.$refs['swip' + (index + 1)] 为动态ref
      //拿到动态ref下的所有有关的类名dom
        const nameArray = Array.from(this.$refs['swip' + (index + 1)].getElementsByClassName(cls));
        nameArray.forEach((item)=>{
        //通过删除类名、添加类名去实现更新动画
          item.classList.remove(cls);
          //必须要重新赋值才可以更新动画哦
          void item.offsetWidth;
          item.classList.add(cls);
        })
      })
    },