Vue 3 过渡在开始时闪烁

Question

我为自己制作了一个 div 的旋转木马，可以滑入和滑出屏幕。我的问题是，在每次过渡开始时，当新的 div 首次呈现时（即 carousel_2 键更改），它似乎在没有应用过渡输入 class 的情况下呈现它。这意味着新的 div 在被翻译出屏幕和视线之外之前会在旧的上方闪烁。就好像过渡需要一点滴答声来注册新的 div 已经出现。如果我能弄清楚如何延迟新 div 的渲染，我相信我的问题可能会得到解决，尽管我不知道如何使用键来做到这一点。

<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%;
}

注意：carousel_2 只是一个计算值，它使用包含要显示的值的对象进行更新。

Answer 1

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

没错。因为在 Vue 3 中 v-enter 和 v-leave 类是 renamed 到 v-enter-from 和 v-leave-from

如果您将转换类更改为：

.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);
}

...问题已解决。 Demo

Vue 3 过渡在开始时闪烁

Vue 3 transition flickers on start

javascript

css

vue.js

transition

vuejs3