Vue 3 过渡在开始时闪烁答案

【问题标题】：Vue 3 transition flickers on startVue 3 过渡在开始时闪烁
【发布时间】：2021-10-25 16:44:56
【问题描述】：

我已经为自己构建了一个可以滑入和滑出屏幕的 div 轮播。我的问题是，在每次转换开始时，当新的 div 首次呈现时（即 carousel_2 键更改），它似乎在没有应用转换输入类的情况下呈现。这意味着新的 div 会在旧的 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 只是一个计算值，它使用包含要显示的值的对象进行更新。

【问题讨论】：

Docs - 不要将对象和数组等非原始值用作v-for 键。请改用字符串或数值。
不幸的是，这似乎没有解决任何问题。如果它有帮助，这是该站点的链接：bachinski-chu.uoguelph.ca/Exhibition.html?ref=10 如果您滚动到底部，您将看到轮播。一旦卡片回到开头并开始重复第二次扫描，闪烁似乎会变得更糟。
我没有说这会有所帮助。看到它运行很有趣，但Minimal, reproducible and runnable example（jsfiddle/codepen 等）会更好......

标签： javascript css vue.js transition vuejs3

【解决方案1】：

在每次转换开始时，当新的 div 首次渲染（即 carousel_2 键更改）时，它似乎在没有应用 transition-enter 类的情况下渲染

没错。因为在 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

【讨论】：