vue项目中会使用wow.js+animate.css这类插件进行项目动画渲染。但是使用animate.css插件没有效果，使用特定版本的animate.css就可以，今天趁着处理vue3 vite项目使用wowjs实现加载动画问题也把这个历史问题给解决了。推荐方案1

解决方案1

自带animate.css

wow.js组件自带了animate直接引用就可以，不用单独再安装animate.css
main.js内引入wow.js自带的animate.css

安装wow.js

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

<div class="wow bounceIn">
</div>

解决方案2

问题原因

排查发现是因为animate.css插件的class名格式发生了变化，需要得加上 "animate__" 前缀才可以正常运行。

从"animated fadeIn"变为了 "animate__animated animate__fadeIn" ,

animate.css安装依赖

npm install animate.css --save

animate.css引入

main.js中引入

import 'animate.css'

animate.css使用

<div class="animate__animated animate__bounceIn">
</div>