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。具体原理说不上来，但是就是这个原因，导致他没有按照设置的过渡效果进行展示。

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