<div id="app">
<button @click="show = !show">toggle</button>
<transition mode="out-in" name="fade">
<p v-if="show" key="a">This is show</p>
<p v-else key="b">This is not-show</p>
</transition>
</div>.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter-to, .fade-leave {
opacity: 1;
}new Vue({
el: '#app',
data: {
show: true
}
})
External CSS
This Pen doesn't use any external CSS resources.