<div id="app">
<button @click="toggle">click Me</button>
<transition name="fade" mode="out-in">
<p v-if="show" key="a">{{ message }}</p>
<p v-else key="b">{{ message1 }}</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
}
const myPlugin = {
install: function(Vue, option) {
Vue.mixin({
methods: {
toggle () {
this.show = !this.show
}
}
})
}
}
Vue.use(myPlugin)
new Vue({
el: '#app',
data: {
show: true,
message: 'From Vue origin',
message1: 'Leave Vue origin',
}
})
This Pen doesn't use any external CSS resources.