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>
  <tr