Vue transition fade-leave-to 移除问题

[yizihan]

问题描述：

basic与device切换时，basic在过渡过程中添加的"fade-leave-to"类名没有被移除，导致basic不显示！

原代码

<transition name="fade">
    <div class="basic" v-show='toggle_flag'>...</div>
</transition>
<transition name="fade">
    <div class="device" v-show="!toggle_flag">...</div>
</transition>

截图

解决方案一：

使用v-if确保只有一个div存在，但是两个div的切换非常生硬，没有过渡效果。因为Vue只会简单的替换div里面的内容，而没有切换效果。

<transition name="fade" >
    <div class="basic" v-if='toggle_flag' >...</div>
    <div class="device" v-else >...</div>
</transition>

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

解决方案二：

添加key属性，此时有fade切换效果了。

<transition name="fade" >
    <div class="basic" v-if='toggle_flag' key="basic">...</div>
    <div class="device" v-else key="device">...</div>
</transition>

参考链接