動的遷移成分VueJS 2

Question

動的

親コンポーネント

<child></child> 

子コンポーネント

遷移

<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 
} 

遷移AとBとの間で切り替えることができるようにします遷移B（animate.cssライブラリを使用）

<transition 
    name="custom-classes-transition" 
    enter-active-class="animated tada" 
    leave-active-class="animated bounceOutRight" 
    > 
    <p v-if="show">hello</p> 
    </transition> 

Answer 1

enterClassとleaveClassを適切に割り当てることで、動的な遷移を行うことができます。 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" 
     } 
    } 
    } 
});