填坑记录：vhr-微人事项目中：关于 Vue cli 项目引用 animate.css 动画不起作用的问题

最近跟着王松老师学习vhr项目。

其中职员的高级搜索框，有一个动画效果。我之前在别的教程中看到过可以引用animate，于是就试试。

1）使用  npm 先安装

npm install animate.css --save

2）在mail.js中引用

import "animate.css/animate.min.css";

3）然后在vue cli项目的<transition>标签中使用

<transition
          type="transition"
          name="fade"
          appear
          enter-active-class="animated swing fade-enter-active"
          leave-active-class="animated swing fade-leave-active"
          appear-active-class="animated fadeInLeft"
      >
      <div v-show="isVisible">需要有显示动画效果的div</div>
</transition>

遗憾的是，没有效果。

一顿好查~~~~~~~~~。

最后百度上查到文章  https://blog.csdn.net/weixin_45693257/article/details/108705218

说是animate的版本问题。npm直接安装的都是最新版本，而vue官网引入的是3.5.1版本，

所以需要先把原来的animate卸载，再安装指定的animate版本。

 

npm uninstall animate.css --save

npm install animate.css@3.5.1 --save

特此记录，填坑记录。