transitioning between images in vuejs

Question

I want to create a smooth transition between 2 images with a legend. The images come from an object-array of images.

Because works only on single tags and components, I've created a component to define the image+legend.

    <transition>
        <home-image :slide="slide" :key="slide"></home-image>
    </transition>

The classes I define are like this

.v-enter-active,
.v-leave-active {
    transition: opacity 2s ease-in-out;
}

.v-leave,
.v-enter-to {
    opacity: 1;
}

.v-enter,
.v-leave-to {
    opacity: 0;
}

The new image is returned by a method

    updateSlide() {
        this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
    }

where entries is my array defined in data

this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section

    this.updateSlide();
    this.uSlide = setInterval( this.updateSlide, 10000);

The code works, in the sense that a new image is loaded in this.slide every 10 seconds. However, the transitions work only "half-way".

There is no transition fading out: the "old image" disappears and makes way for the new image fading in.

However, what I'd like is a smooth transition from one to the other.

I've tried more than a couple of ideas including using mode="out-in" and "in-out" but nothing works as I want.

What am I overlooking?

transitioning between images in vuejs

0 Answers0