CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Stephan-v
Stephan-v

Reputation: 20309

Vue.js transition mode not working?

I am currently working on a slider component but it seems that my transition mode is not working. I have used:

<transition name="fade" mode="out-in">

To my understanding this should force the element going out to first complete it's entire animation before the element in is being rendered.

This is an example of my slider component:

https://www.webpackbin.com/bins/-KfMMcLvpUA6LGOFL3vM

I could fix it by overlaying images absolute but that is obviously not something that I want to do when there could be a neater solution.

The transition CSS is included in the header of the index page:

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

I have it up the as easily usable as possible, if somebody could take a look that would be awesome.

Upvotes: 0

Views: 2573

Answers (1)

Roy J
Roy J

Reputation: 43881

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.

Upvotes: 4

Related Questions