关于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/transitions.html

补充：

问题1：不同类型的组件之间切换，有过渡效果，而相同组件(不同内容)切换则没有过渡效果

vue官网的描述：当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 组件中的多个元素设置 key 是一个更好的实践。