1. Vue 官网引用的是 animate.css 3.5 版本
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
2. 不能引用 animate.css 最新版本 例如：(4.0)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
3. vue 和 animate.css 版本兼容性问题导致动画不起作用
<body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏 --> <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="200"> <h3 v-show="flag">这是一个h3</h3> </transition> <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut"> <h3 v-show="flag" class="animated">这是一个h3</h3> </transition> --> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: "#app", data: { flag: false }, methods: { }, }) </script> </body>
4. 官网解决办法
从v3.x及以下版本迁移 Animate.css v4进行了一些改进，改进了动画，并添加了新动画，因此值得进行升级。但这也带来了重大变化：我们为所有Animate.css类添加了前缀-默认为animate__-因此无法直接迁移。 但是不要害怕！尽管默认版本animate.min.css带有animate__前缀，我们也提供了animate.compat.css文件，该文件根本没有前缀，就像以前的版本（3.x及更低版本）一样。 如果您使用捆绑器，则只需更新导入： 从： 导入 'animate.min.css' ; 至 导入 'animate.compat.css' ; 请注意，根据项目的配置，这可能会有所变化。 如果使用CDN，只需更新HTML上的链接： 从： < head > < link rel =“ stylesheet ” href =“ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css ” /> </ head > 至 < head > < link rel =“ stylesheet ” href =“ https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css ” /> </ head > 对于新项目，强烈建议使用默认的前缀版本，因为这将确保您几乎不会有与项目冲突的类。此外，在更高版本中，我们可能决定终止该animate.compat.css文件。