Dynamic transition component VueJS 2

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>

The thing is instead of just changing the name of the transition I would like to use custom class for one but no for the other. First transition would be a transtition with name fade. The second transition would use custom class, like SlideInUp from animate.css — Léo Coco
– Léo Coco, Commented Feb 17, 2017 at 13:45
Somehting like that : fiddle.jshell.net/j9h3Lmr5 (it is not working) — Léo Coco
– Léo Coco, Commented Feb 17, 2017 at 13:55

Saurabh · Accepted Answer · 2017-02-17 15:09:14Z

2

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

answered Feb 17, 2017 at 15:09

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Léo Coco Over a year ago

That's exactly what I was confused about ! Thanks a lot

Collectives™ on Stack Overflow

Dynamic transition component VueJS 2

Parent component

Child component

Transition A

Transition B (using animate.css library)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Parent component

Child component

Transition A

Transition B (using animate.css library)

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related