vue v-if transition不起作用

<transition name="动画名"></transition>

ps：过渡的元素只能是以下之一：
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

自定义过渡动画的，记得在css中修改以下的类名：
动画名-enter 进入前效果
动画名-enter-active 进入的过渡时间和函数
动画名-enter-to 进入后效果
动画名-leave 离开前效果
动画名-leave-active 离开的过渡时间和函数
动画名-leave-to 离开后效果

例如：

/*fade-transform*/
.fade-transform-leave-active, .fade-transform-enter-active{ 
  transition all 0.4s
}
.fade-transform-enter{ 
  opacity 0
  transform translateX(-30px)
}
.fade-transform-leave-to{ 
  opacity 0
  transform translateX(30px)
}

<transition name="fade-transform">
   <div v-if="isShow">
     <div class=""></div>
   </div>
   <div v-else>
     <span>暂无更多</span>
   </div>
</transition>

这样写完全没有淡入淡出的效果，那是什么原因导致transition不起作用呢？
原因在这里：
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue为了效率只会替换相同标签内部的内容。
所以需要这样写：

<transition name="fade-transform">
   <div v-if="show" key="box1">
     <div class=""></div>
   </div>
   <div v-else key="box2">
     <span>暂无更多</span>
   </div>
</transition>