Vue.js图片翻转动画为何短暂出现第三张图？求修复方案

1. 冗余DOM节点干扰：你通过v-for渲染了所有图片，而非仅当前显示和用于过渡的上一张图片。每次切换时，旧的上一张图片会失去turnedLeft类，回到默认的rotateY(180deg)状态，但这些图片仍存在于DOM中，动画过渡瞬间浏览器渲染时会短暂暴露它们，导致闪烁。
2. 层级控制不彻底：非活跃/非过渡状态的图片仅靠rotateY(180deg)和backface-visibility:hidden无法完全避免渲染层级变动时的意外显示，没有明确的隐藏规则兜底。

从根源消除多余图片的干扰，只在DOM中保留当前图片和上一张过渡图片：

修改模板部分 #

<template>
  <div class="start-screen">
    <div class="container">
      <div id="card">
        <!-- 上一张过渡图片 -->
        <div
          v-if="previousIndex !== null"
          class="flip-page turnedLeft"
          :style="{ backgroundImage: `url(${images[previousIndex]})` }"
        ></div>
        <!-- 当前显示图片 -->
        <div
          class="flip-page active"
          :style="{ backgroundImage: `url(${images[currentIndex]})` }"
        ></div>
      </div>
    </div>
  </div>
</template>

脚本与样式说明 #

• 脚本部分无需修改，nextSlide方法中对currentIndex和previousIndex的逻辑依然有效：每次切换时先把当前索引存为上一张，再获取新的随机索引。
• 样式部分保持原有逻辑即可，现在仅两张图片存在，active（层级z-index:2）和turnedLeft（层级z-index:1）的层级关系足够保证动画正确展示，不会出现其他图片干扰。

备选方案（保留全量渲染时的修复） #

如果需要保留所有图片的DOM节点，可在样式中添加规则强制隐藏非必要图片：

.flip-page:not(.active):not(.turnedLeft) {
  display: none;
}

不过这种方案不如仅渲染必要图片高效，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者mathbreaker