Vue3 Transition mode在v-for中失效及内容切换过渡实现问题

问题描述 #

Vue3的Transition组件mode属性在v-for循环内无法正常工作，官方示例中的mode仅在v-if&v-else-if代码块中生效，而在v-for包裹Transition、内部用v-if控制显示的场景下完全无效。希望切换内容时应用out-in过渡效果，且不想使用绝对定位方案，尝试过外层用transition-group，但该组件不支持mode属性。

原问题代码示例：

<div v-show="docState" class="dio">
  <div class="nav-panel">
    <Transition v-for="doc in docList" name="slide-up" mode="out-in">
      <button v-if="doc === docState">{{doc}}</button>
    </Transition>
  </div>
</div>

原因分析 #

v-for会生成多个独立的Transition组件实例，每个实例仅负责渲染当前匹配docState的按钮。切换docState时，旧按钮所在的Transition销毁元素，新按钮所在的Transition创建元素，两个过程完全独立，mode="out-in"要求的“先完成离开过渡再触发进入过渡”逻辑无法在多个独立Transition间生效。

解决方案 #

将单个Transition组件放在外层，内部通过key绑定docState来触发元素替换，让mode属性作用于同一个Transition实例内的元素切换：

<div v-show="docState" class="dio">
  <div class="nav-panel">
    <Transition name="slide-up" mode="out-in">
      <button :key="docState">{{ docState }}</button>
    </Transition>
  </div>
</div>

如果需要为不同doc绑定不同逻辑（如点击事件、自定义内容），可以结合计算属性或方法实现：

<Transition name="slide-up" mode="out-in">
  <button 
    :key="docState" 
    @click="handleDocClick(docState)"
    :class="getDocClass(docState)"
  >
    {{ getDocLabel(docState) }}
  </button>
</Transition>

若内容结构复杂，可使用动态组件配合key：

<Transition name="slide-up" mode="out-in">
  <component 
    :is="getCurrentDocComponent(docState)" 
    :key="docState"
    :doc="docState"
  />
</Transition>

方案说明 #

• mode="out-in"仅对同一个Transition组件内部的元素替换生效，通过将所有可能的切换元素放在单个Transition内，并用key触发元素的销毁与重建，就能让过渡顺序符合预期。
• 无需依赖v-for生成多个Transition，也不需要绝对定位来模拟过渡效果。

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