最近在学习vue3，为了更好的实践，所以着手将手头以前做过的项目升级为vue3来对比看看都有哪些变化。于是将手头的项目数据大屏视频监控智能分析系统进行vue3升级。之前的项目中要引入wowjs来实现动画，但是升级到vue3后再使用wowjs会报下面的错误。

报错

Uncaught TypeError: Cannot set properties of undefined (setting 'getPropertyValue')
    at getComputedStyle (wow.js:143:10)
    at WOW.animationName (wow.js:431:25)
    at WOW.cacheAnimationName (wow.js:441:52)
    at WOW.customStyle (wow.js:368:14)
    at wow.js:330:24

解决办法

升级到vue3后，插件也要跟着升级，原本的wowjs不能使用了，改为wow.js就可以了。

首先安装依赖

pnpm i wow.js

引入animate.css动画样式

wow.js组件自带了animate.css直接引用就可以

import 'wow.js/css/libs/animate.css'

组件内使用

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();
  },

html代码

<div class="homebodyitem wow slideInLeft"></div>