I am seeking to achieve a seamless transition between two images along with a corresponding legend. These images are sourced from an object-array collection.
Since transitions operate only on single tags and components, I have devised a component to encapsulate the image and legend.
<transition>
<home-image :slide="slide" :key="slide"></home-image>
</transition>
The classes I have defined for this purpose are as follows:
.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;
}
A new image is selected through a method like so:
updateSlide() {
this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
}
Here, entries refers to the array specified in the data section.
The updateSlide() method is called at regular intervals, every 10 seconds, as defined in the created() section:
this.updateSlide();
this.uSlide = setInterval( this.updateSlide, 10000);
The code successfully loads a new image into this.slide every 10 seconds. However, the transitions are not working as desired.
Currently, the transition involves the "old image" disappearing abruptly and the new image fading in.
My aim, however, is to achieve a smooth transition between the two images.
I have experimented with various approaches, such as using mode="out-in" and "in-out", but have not yet achieved the desired effect.
What could I be missing in this scenario?