前言

wow.js是一个可以在页面滚动的过程中逐渐释放动画效果，让页面滚动更有趣的一个插件库。

官网：wow.js — Reveal Animations When Scrolling

参数说明：
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-iteration：动画的次数重复（无数次：infinite）
data-wow-offset：开始动画的距离（元素距离浏览器底部的长度）

一、导入依赖

（1）注意 wow.js 已经自带 animate.css

npm i wow.js -D

二、示例代码

（1）src/views/Example/WOWjs/index.vue

<template>
  <div>
    <ul>
      <li class="wow rollIn" style="background-color: #5ac4ff">wow rollIn</li>
      <li class="wow rollIn" data-wow-duration="2s" data-wow-delay="3s" style="background-color: lightgreen">wow rollIn</li>
      <li class="wow rollIn" data-wow-offset="600"  data-wow-iteration="10" :style="'background-color: ' + randomRGBA()">wow rollIn</li>
      <li class="wow lightSpeedIn" :style="'background-color: ' + randomRGBA()">wow lightSpeedIn</li>
      <li class="wow swing" :style="'background-color: ' + randomRGBA()">wow swing</li>
      <li class="wow pulse" :style="'background-color: ' + randomRGBA()">wow pulse</li>
      <li class="wow flip" :style="'background-color: ' + randomRGBA()">wow flip</li>
      <li class="wow flipInX" :style="'background-color: ' + randomRGBA()">wow flipInX</li>
      <li class="wow bounce" :style="'background-color: ' + randomRGBA()">wow bounce</li>
      <li class="wow bounceInDown" :style="'background-color: ' + randomRGBA()">wow bounceInDown</li>
      <li class="wow bounceInUp" :style="'background-color: ' + randomRGBA()">wow bounceInUp</li>
      <li class="wow bounceInLeft" :style="'background-color: ' + randomRGBA()">wow bounceInLeft</li>
      <li class="wow bounceInRight" :style="'background-color: ' + randomRGBA()">wow bounceInRight</li>
    </ul>
  </div>
</template>
 
<script>
import WOW from 'wow.js'
 
export default {
  data: () => ({
 
  }),
  mounted() {
    const wow = new WOW({
      boxClass: 'wow',            // animated element css class (default is wow)
      animateClass: 'animated',   // animation css class (default is animated)
      offset: 0,                  // distance to the element when triggering the animation (default is 0)
      mobile: true,               // trigger animations on mobile devices (default is true)
      live: true,                 // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null,      // optional scroll container selector, otherwise use window
    })
    wow.init()
  },
  methods: {
    randomRGBA() {
      const rs = 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ',' + 0.8 + ')'
      return rs
    }
  }
}
</script>
 
<style lang="less" scoped>
  ul {
    width: auto;
    height: auto;
    padding: 100px 250px;
    list-style: none;
  
    li {
      width: 100%;
      height: 150px;
      margin: 50px 0;
      color: #fff;
      text-align: center;
      line-height: 150px;
      font-size: 20px;
    }
  }
</style>
 
<style src="wow.js/css/libs/animate.css"></style>

（2）设置滚动条返回该 wow 节点时，再次触发动画

三、运行效果