關於 Vue 引用 animate.css 動畫 不起作用的問題（版本相容性）神坑
阿新 • • 發佈：2020-07-13
1. Vue 官網引用的是 animate.css 3.5 版本
<link href="https://cdn.jsdelivr.net/npm/[email protected]" 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>