vuejs fade-enter-active 過渡動畫沒有效果

在做一個仿餓了麼外賣頁面效果時，有一個詳情頁面顯示隐藏的過渡效果。

在折騰了半天後終于發現，他那個效果是用vue1.0寫的，在我這2.5版本的vue面前完全不頂用。找到問題就好辦了，趕緊上官網搬了一段救兵回來。

在需要過渡效果的元素外面套一層：

<transition name='fade'></transition>

然後添加樣式：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
           

很簡單嘛，效果立竿見…… 诶，不對，“影子”呢？怎麼感覺顯示和消失的速率不一樣啊，為了更明顯的感覺，我把時間改成了3s，這下立馬露餡兒了。

顯示的時候立刻就出現了，消失時确實是按照了3s的設定緩慢消失。

逗我玩兒呐！把官方文檔掀的底朝天了都沒看出毛來，又搜了一堆的部落格，也沒有頭緒。這眼看着就1點半了，困意來襲，咋辦明天繼續麼？

在我又一次把所有代碼拆成單個樣式後，不知道哪根筋抽了下，會不會是顯示控制的問題？仔細對比了官方源碼：

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>
           

！！！ v-if！ v-if！ v-if！ 娘的，說好的不是可以用v-show來顯示隐藏的麼，為啥效果還不一樣？

又去撸了一邊條件渲染：

v-if 指令用于條件性地渲染一塊内容。這塊内容隻會在指令的表達式傳回 truthy 值的時候被渲染。

v-show與v-if不同, v-show的元素始終會被渲染并保留在 DOM 中,隻是簡單地切換元素的 CSS 屬性 display。

這下清楚了，當顯示的時候，v-show直接切換了元素的CSS 屬性 display。具體原理說不上來，但是就是這個原因，導緻他沒有按照設定的過渡效果進行展示。

自己挖的坑，還得自己填上！