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文件。