有没有一种方法可以在vuejs条件v-if和v-else之间使用transition？
例如:
<transition name="fade">
<p v-if="show">hello</p>
<p v-else>Goodbye</p>
</transition>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
在这种情况下，我似乎无法使用transition，当你切换show时，<p>个元素之间使用transition.
您的问题是因为vue transition没有看到元素更改，它只看到内容更改.
这是因为两个元素都有相同的标记名，所以vue只是重用了这个标记名.为了抵消这一点，请为这两个元素指定不同的键值:
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
例子:
new Vue({
el: '#demo',
data: {
show: true
}
});.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
</transition>
</div>