<div id="app">
<button @click="view = 'v-a'">toggle A</button>
<button @click="view = 'v-b'">toggle B</button>
<transition mode="out-in" name="fade">
<component :is="view"></component>
</transition>
</div>div {
margin-top: 10px;
}
.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,
view: 'v-a'
},
components: {
'v-a': {
template:`<div>This is A component</div>`
},
'v-b': {
template:`<div>This is B component</div>`
},
}
})
External CSS
This Pen doesn't use any external CSS resources.