I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-enter class initially applied to it. This results in the new div flickering over the old one before smoothly transitioning off the screen. It seems like there is a delay in registering that the new div has appeared. If I could somehow postpone the rendering of the new div for a moment, I believe this problem could be resolved. Unfortunately, I am unsure how to achieve this using keys.
<transition name="slide-img">
<div :key="carousel_2" class="workDiv-container">
<div class="workDiv">
<div class="imgDiv">
<img :src="carousel_2.img" style="width: 100%;"/>
</div>
<div class="infoDiv">
<h1>{{ carousel_2.title }}</h1>
<h3>{{ carousel_2.creator }}</h3>
<h3>{{ carousel_2.date }}</h3>
<h3>{{ carousel_2.medium }}</h3>
<h3>{{ carousel_2.idno }}</h3>
<h3>{{ carousel_2.dimensions }}</h3>
</div>
</div>
</div>
</transition>
.slide-img-enter {
left: -100%;
transform: translate(0, 0);
}
.slide-img-enter-to {
left: -100%;
transform: translate(100%, 0);
}
.slide-img-enter-active {
transition: transform 2s;
}
.slide-img-leave {
transform: translate(0, 0);
}
.slide-img-leave-to {
transform: translate(100%, 0);
}
.slide-img-leave-active {
transition: transform 2s;
}
.workDiv-container {
position: absolute;
width: 100%;
height: 100%;
}
NOTE: The 'carousel_2' variable is recalculated with the object values for display purposes.