關於vue狀態過渡transition不起做用的緣由

總所周知，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...