以一個toggle按鈕控制p元素顯隱為例，如果不使用過渡效果，則如下所示

<div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">藍色理想</p></div><script>new Vue({ el: '#demo', data: {  show: true }})</script>

如果要為此加入過渡效果，則需要使用過渡組件transition 

過渡組件

Vue提供了transition的封裝組件，下面代碼中，該過渡組件的名稱為'fade'

 <transition name="fade">  <p v-if="show">藍色理想</p> </transition>

當插入或刪除包含在transition組件中的元素時，Vue會自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名 

過渡類名

總共有6個(CSS)類名在enter/leave的過渡中切換

v-enter

定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除

v-enter-active

定義過渡的狀態。在元素整個過渡過程中作用，在元素被插入時生效，在 transition 或 animation 完成之后移除。 這個類可以被用來定義過渡的過程時間，延遲和曲線函數

v-enter-to

定義進入過渡的結束狀態。在元素被插入一幀后生效(與此同時 v-enter 被刪除)，在  transition 或 animation 完成之后移除

v-leave

定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除

v-leave-active

定義過渡的狀態。在元素整個過渡過程中作用，在離開過渡被觸發后立即生效，在 transition 或 animation 完成之后移除。 這個類可以被用來定義過渡的過程時間，延遲和曲線函數

v-leave-to

定義離開過渡的結束狀態。在離開過渡被觸發一幀后生效(與此同時 v-leave 被刪除)，在 transition 或 animation 完成之后移除

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴，表示過渡組件的名稱。比如，如果使用 <transition name="my-transition"> ，則 v-enter替換為 my-transition-enter

transition

常用的Vue過渡效果都是使用CSS過渡transition，下面增加一個enter時透明度變化，leave時位移變化的效果

<style>.fade-enter{ opacity:0;}.fade-enter-active{ transition:opacity .5s;}.fade-leave-active{ transition:transform .5s;}.fade-leave-to{ transform:translateX(10px);}</style><div id="demo"> <button v-on:click="show = !show">Toggle</button>   <transition name="fade">  <p v-if="show">藍色理想</p> </transition></div><script>new Vue({ el: '#demo', data: {  show: true }})</script>

animation

CSS動畫animation用法同CSS過渡transition，區別是在動畫中 v-enter 類名在節點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發時刪除