Vue3 中使用 wow.js 實現動畫懶加載

原版 wowjs 在 Vue2 項目中可以正常使用，但是放在 Vue3 項目中會報錯。

報錯信息：

Cannot set property 'getPropertyValue' of undefined

Vue3 項目中需要改用 wow.js

1. 安裝 wow.js（注意是 wow.js 不是 wowjs）

npm install wow.js --save
# or
yarn add wow.js

2. 安裝 animate.css

npm install animate.css --save
# or
yarn add animate.css

3. 在 main.ts/main.js 中配置 animate.css

import animated from "animate.css";

app.use(animated);

4. 在組件中使用 wow.js

import WOW from "wow.js";

mounted() {
    var 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,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },

5. 在要實現動畫的HTML元素上配置參數，更多動畫效果可參考 Animate.css

  <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

結語：沒放在vue2中測試，可參考：https://blog.csdn.net/qq_45807943/article/details/109688908