總所周知，vue中的transition標簽可以方便得進行動畫過渡，使用的方法也很簡單。

<transition name="你要的名字">  過渡的元素...</transition>

這里需要主要一點的是：過渡的元素只能是以下之一：

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

常用的過渡名稱有fade等

你可以這樣用

<transition name="fade">  過渡的元素...</transition>

實現的效果就是淡入淡出。

如果需要自定義過渡動畫的，記得在css中修改以下的類名：

你要的名字-enter             進入前效果
你要的名字-enter-active     進入的過渡時間和函數
你要的名字-enter-to         進入后效果
你要的名字-leave             離開前效果
你要的名字-leave-active     離開的過渡時間和函數
你要的名字-leave-to         離開后效果

寫到這里相信大家都已經會簡單地使用transition了。

請閱讀以下的代碼：

<transition name="fade">   <div v-if="show">     <div class="item-box"></div>   </div>   <div v-else>     <span>暫無更多</span>   </div></transition>

結果是完全沒有淡入淡出的效果，那這是什么原因導致transition不起作用呢？

原因在這里：

當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐。

所以需要這樣寫：

<transition name="fade">   <div v-if="show" key="box1">     <div class="item-box"></div>   </div>   <div v-else key="box2">     <span>暫無更多</span>   </div></transition>

刷新運行，完美實現效果～～～～

參考資料：https://cn.vuejs.org/v2/guide/transitions.html

補充：

問題1：不同類型的組件之間切換，有過渡效果，而相同組件(不同內容)切換則沒有過渡效果

vue官網的描述：當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 組件中的多個元素設置 key 是一個更好的實踐。