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>
关于 Vue 引用 animate.css 动画 不起作用的问题（版本兼容性）神坑
原文：https://www.cnblogs.com/cntian/p/13292041.html
