CODEWITHSUNDEEP
componentstransitionvuejs2
Léo Coco
Léo Coco

Reputation: 4282

Dynamic transition component VueJS 2

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>

Upvotes: 0

Views: 1030

Answers (1)

Saurabh
Saurabh

Reputation: 73619

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

Upvotes: 2

Related Questions