我发现两个div元素之间的转换不起作用，如下所示:
<transition name="fade">
<div v-if="show">111</div>
<div v-else>222</div>
</transition>
但如果只有一个div元素，它就可以工作，比如:
<transition name="fade">
<div v-if="show">111</div>
<p v-else>222</p>
</transition>
这是vue 2漏洞吗？或者我不能用两个div元素？
如何使用两个div元素..？
你应该为divs添加unique key属性，这样它才能工作:https://jsfiddle.net/a8fv6rvp/1/
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<transition name="fade" mode="out-in">
<div v-if="show" key="1">111</div>
<div v-else key="2">222</div>
</transition>
<button @click="show = !show">Toggle</button>
</div>
new Vue({
el: '#app',
data: {
show: true
}
});
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>