#筆記 Vue.js 使用動畫過場

Vue.js有將動畫效果封裝至Html標籤transition裏頭，但必須配合:

條件渲染 (使用 v-if) 
條件展示 (使用 v-show) 
動態組件 
組件根節點

只要在欲產生動畫效果組件上層添加標籤transition即可達成，如:

<transition name="fade">
<h2 v-if="show">Hi<h2>
</transition>
<button @click="show=false">remove<button>

再來寫入CSS

.fade-enter-active, .fade-leave-active {   
      transition: opacity .5s; 
} 
.fade-enter, .fade-leave-to{   
    opacity: 0; 
}

分別寫著進入移出動畫效果

其中.fade是對應transition標籤中name，因此name怎麼命名，css中就要怎麼寫，如name="qq"，CSS就要寫 .qq-enter-active以此類推。

但如果每次都要寫動畫，都要寫這麼多，避免有些繁雜，因此可以透過Animate.css 這個函示庫輕鬆寫動畫。

直接在標籤transition 寫入過度類，程式範例如下

<transition 
enter-active-class="animated bounceOutLeft"//進入時效果
   leave-active-class="animated bounceOutLeft"//移出時效果
>
<h1 v-show='isShow'>hi</h1>
</transition>

其中的類名(class)，可以去參考Animate.css，這樣有不用寫CSS啦。

要記得先引入CDN喔。

參考資料:Vue.js 過度&動畫