Dynamic transition component VueJS 2 - components

Question

I would like to be able to switch between transition A and B dynamically
Parent component
<child></child>
Child component
Transition A
<transition name="fade">
<p v-if="show">hello</p>
</transition>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
Transition B (using animate.css library)
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>

Answer 1

You can do the dynamic transition with properly assigning the enterClass and leaveClass. Here is the working demo: https://fiddle.jshell.net/j9h3Lmr5/1/
JS:
var vm = new Vue({
el: '#vue-instance',
data: {
show: true,
transitionType: "fade",
enterClass: "fade-enter",
leaveClass: "fade-enter-active"
},
methods: {
changeTransition() {
if (this.transitionType === "fade") {
this.transitionType = "custom-classes-transition"
this.enterClass = "animated slideInUp"
this.leaveClass = "animated slideOutDown"
} else {
this.transitionType = "fade"
this.enterClass = "fade-enter"
this.leaveClass = "fade-enter-active"
}
}
}
});