Vue 3 transition flickers on start

I’ve built myself a carousel of divs that slide in and out of the screen. My problem is that on the start of every transition, when the new div first renders (ie. the carousel_2 key changes), it seems to render without the transition-enter class applied to it. This means that the new div flickers overtop of the old one before getting translated off the screen and out of view. It’s almost as though the transition takes a tick to register that the new div has appeared. If I could figure out how to delay the new div from rendering for a tick, I believe that my problem might be solved, though I don’t know how to do this with 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: carousel_2 is just a computed value that is updated with the object containing the values to display.

Answer

on the start of every transition, when the new div first renders (ie. the carousel_2 key changes), it seems to render without the transition-enter class applied to it

That’s right. Because In Vue 3 the v-enter and v-leave classes are renamed to v-enter-from and v-leave-from

If you change your transition classes to:

.slide-img-enter-from {
  left: -100%;
  transform: translate(0, 0);
}
/* this one is actually not needed at all */
.slide-img-leave-from {
  transform: translate(0, 0);
}

…the problem is fixed. Demo