animate.css是一個跨瀏覽器的CSS3動畫庫箍镜，它內置了很多經典的CSS3動畫源祈。使用起來很方便。下面我們通過例子講解如何使用自定義類名和animate.css庫實現(xiàn)動畫效果色迂。
(1)從animate.css官方網(wǎng)站獲取animate.css文件香缺，保存到chapter04目錄中。
(2)創(chuàng)建C:\vue\chapter04\demo02.html文件歇僧，引入animate.css图张，如下所示：
<link rel="stylesheet" href="animate.css">
(3)在demo02.html文件中編寫HTML結構锋拖，具體代碼如下：
<div id="app">
<button @click="show=!show">顯示/隱藏</button>
<transition enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutLeft">
<p v-if="show">過渡文字效果</div>
</transition>
</div>
上述代碼中，第3祸轮、4行給標簽設置了enter-active-class與leave-active-class兩個屬性兽埃，用來自定義類名，屬性值為animate.css動畫庫中定義好的類名适袜。例如柄错，第3行的“animated bounceInLeft”包含兩個類名，animated是基本的類名苦酱，任何想實現(xiàn)動畫的元素都要添加它;bounceInLeft是動畫的類名售貌，bounceInLeft表示入場動畫，bounceOutLeft表示出場動畫疫萤。
(4)在demo02.html文件中編寫JavaScript代碼颂跨，具體代碼如下：
var vm = new Vue({ el: '#app', data: (show:true) })
(5)保存代碼，在瀏覽器中運行程序扯饶。單擊“顯示/隱藏”按鈕恒削，即可看到文字顯示或隱藏的動畫效果。
