Vue.js-条件之间的转换（v-if和v-else）

是否有一种方法可以在vuejs条件语句

v-if

和

v-else

之间使用

transition

例如：

<transition name="fade">
    <p v-if="show">hello</p>
    <p v-else>Goodbye</p>
</transition>

---

在这样的场景中，我似乎无法使用

转换

，在切换

show

时，

元素在它们之间使用

转换

使用两种转换：

newvue({
el:'演示'，
数据：{
秀：真的
}
})

。淡入激活状态{
过渡：不透明度
}
.淡入，
.淡入淡出激活状态{
不透明度：0
}

切换
你好

再见

您的问题是因为vue transition没有看到元素更改，它只看到内容更改

这是因为两个元素都有相同的标记名，所以vue只是重用了这个标记名。要抵消此影响，请为这两个元素指定不同的键值：

你好

再见

例如：

newvue({
el:'演示'，
数据：{
秀：真的
}
});
。淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度
}
.淡入，
.淡出{
不透明度：0
}

切换
你好

再见
如果你很懒，你也可以只在一个元素上设置一个键，它仍然可以工作。不要忘记转换模式，以防止同时进入和离开，就像这样：
@Ferribig，你介意解释一下这个解决方案吗？谢谢所有这些信息顺便说一句！
new Vue({
   el: '#demo',
   data: {
       show: true
   }
})

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
 }

.fade-enter,
.fade-leave-active {
    opacity: 0
}