animate.css是一款前端動畫庫，相似的有velocity-animate。
上述是一個完整的結構。其中重要的幾個點用箭頭表示出來。首先在transition組件內部，需要定義兩個基本的class類，表示過渡進來和過渡出去的時候所要配合使用的animate.css的類值。zoomInLeft/zoomOutRight是其中的一對兒。具體的其它效果可以查看animatecss的官網。其次在transition組件內部的話，需要過渡的子元素需要加上animated類。最后可能也是比較容器忽略的點，這個v-show看似好像是多余的，但是不加上的話，對於過渡效果是沒用的。因為過渡是從一個從無到有的一個效果。最開始進來的時候如果元素本身是show 的，那么過渡就失效了。所以在元素上面需要加上這個v-show屬性。在過渡進來的時候，v-show設置為true，相反為false。
下面看一段實例代碼vue過渡和animate.css結合使用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>動畫</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="external nofollow" /> </head> <body> <div id="box"> <!-- 控制數據的值切換顯示隱藏 --> <button @click="show=!show">transition</button> <transition name="" mode="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated">第一種方法</p> </transition> <transition name="" mode="" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show">第二種方法</p> </transition> <!-- 多元素運動 --> <transition-group tag="" name="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" :key="1">第一個元素</p> <p v-show="show" class="animated" :key="2">第二個元素</p> </transition-group> </div> <script> window.onload = function(){ var app = new Vue({ el:'#box', data:{ show:false } }) } </script> </body> </html>