Vue.js - Transitions between conditionals (v-if and v-else)
Use two transitions:
new Vue({
el: '#demo',
data: {
show: true
}
}).fade-enter-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
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 v-if="show">hello</p>
</transition>
<transition name="fade">
<p v-if="!show">Goodbye</p>
</transition>
</div>https://jsfiddle.net/saeedahmadi/fbponh78/10/
Your problem is caused by the fact that vue transition does not see the element change, it only sees the content change.
This is caused by the fact that both elements have the same tag name, so vue just reuses this. To counteract this, give both elements an differed key value:
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
Example:
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>