vue中使用animate.css

引言：以前都是直接将animate.css包下载下来芳在项目中引入，但随着工程化越来越广泛的被使用，现在都是通过依赖安装使用；我第一次使用的时候发生了错误，没有生效，网上查看别人的也都这样使用，后来经过查看了一下源码，才知道问题出在哪，下面就介绍一下我在使用过程中的问题以及如何解决不生效问题的。

1、首先安装都是一样的：

npm install animate.css --save

2、在main.js中进行引用

import animated from 'animate.css';
Vue.use(animated)

最后使用的过程中一开始我是这样用的，没有生效：

<transition 
    enter-active-class="animated fadeInUp" 
    leave-active-class="animated fadeInDown">

    <div class=""> 测试animate.css</div>

</transition>

 

下面我们看一下源码：，先找到文件：

在node_modules文件夹中找到animate.css文件，打开文件可以看到动画库的class命名：

通过源码可以清晰的看到，所有的class前面都加了一个字符串，所以我们的css没有生效，因为我们的class写错了，

这个时候我们改一下：

<transition 
    enter-active-class="animate__animated animate__fadeInUp" 
    leave-active-class="animate__animated animate__fadeInDown">

       <div class=""> 测试animate.css</div>

</transition>

发现动画生效了，其他的动画css也是一样的，前面加上‘animate__’就可以了。

但我看网上很多都是不生效的写法，所以怀疑是版本的问题导致的，我的animate.css版本号是V4.1.0，然后我看了一下最早的版本V3.1.1，果然老版本写法就是同animate.css写法，没有加animate__，所以如果使用的过程中没有生效，大家可以查看一下源码。

V3.1.1class写法命名：

希望能够对大家有所帮助。