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?

Answer 1

Found out position in v-enter and v-leave had to be set.

Code is now:

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

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