动态过渡组件 VueJS 2

Question

我希望能够在转换 A 和 B 之间动态切换

父组件

<child></child>

子组件

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

转换 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"
      }
    }
  }
});