[Vuejs]-Vue.js transition mode not working?

by

4👍

✅

Your understanding that one transition will complete before another starts is wrong. It might be true if you were changing out an element within a single transition tag, but it is not true when each element is wrapped in its own transition tag.

The easiest thing you could do is use setTimeout to make the assignment of the next activeSlide wait for the transition.

    methods: {
        prevSlide() {
            const nextSlide = this.activeSlide === this.firstSlide ? this.lastSlide : this.activeSlide - 1;
            this.activeSlide = null;
            setTimeout(() => {
              this.activeSlide = nextSlide;
            }, 500);
        },
        nextSlide() {
            const nextSlide = this.activeSlide === this.lastSlide ? this.firstSlide : this.activeSlide + 1;
            this.activeSlide = null;
            setTimeout(() => {
              this.activeSlide = nextSlide;
            }, 500);
        }
    }

That requires that your timeout value and your CSS transition length be kept in sync.

Somewhat more work would be to use the transition hooks to emit events when a leave transition started and ended.

<transition name="fade" mode="out-in" @leave="transitionStarted" @after-leave="transitionComplete">

You would catch them in the top-level code, (not in slider, because slot events don’t propagate to the slot container)

<slide src="http://lorempixel.com/196/196" alt="" @transition-started="holdUp" @transition-complete="okGo"></slide>

In the handlers (holdUp and okGo) you would set a boolean data item that you would pass to slider as a prop. In slider, nextSlide and prevSlide would calculate what the next value of activeSlide will be, but will not set it. It would get set when the prop indicated that the transition was finished.

👤Roy J

Leave a comment