在 Vue 过渡中，mode="out-in" 会强制旧元素完全退出后新元素才进入，导致动画割裂；若需让新元素在旧元素过渡中途（如 50% 位移时）即开始入场，应改用默认并行模式，并精细控制 CSS 过渡时序。

在 vue 过渡中，`mode="out-in"` 会强制旧元素完全退出后新元素才进入，导致动画割裂；若需让新元素在旧元素过渡中途（如 50% 位移时）即开始入场，应改用默认并行模式，并精细控制 css 过渡时序。

Vue 的 <transition> 组件默认采用 并行模式（no mode），即 v-leave 与 v-enter 阶段可同时发生——这正是实现“Block 2 在 Block 1 移动至 50% 时即滑入”的关键。而 mode="out-in" 会阻塞新元素的 enter 阶段，直到旧元素完成 leave-to，因此必须移除。

以下为优化后的完整实现方案：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

<template>
  <div id="app">
    <button @click="show = !show">Click Me!</button>
    <!-- ✅ 移除 mode="out-in"，启用默认并行过渡 -->
    <transition>
      <div class="block" id="block-1" v-if="show" key="block1">Block 1</div>
      <p class="block" id="block-2" v-else key="block2">Block 2</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { show: true };
  }
};
</script>

<style>
#app {
  padding: 10px;
  background-color: #666;
  overflow: hidden;
}

.block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #999;
  color: white;
  font-weight: bold;
  margin: 0 5px;
}

/* Block 1 退出：从 0% → -220%（向左滑出） */
.v-leave-from { transform: translateX(0); }
.v-leave-active { 
  transition: transform 1s ease-in-out; /* 缓动更自然 */
}
.v-leave-to { transform: translateX(-220%); }

/* Block 2 进入：从右侧外（600%）→ 0%，但起始时间与 leave 同步 */
.v-enter-from { transform: translateX(600%); }
.v-enter-active { 
  transition: transform 1.5s ease-in-out; /* 略长于 leave，营造“跟随感” */
}
.v-enter-to { transform: translateX(0); }
</style>

✅ 关键要点说明：

• key 属性不可省略：为两个元素显式设置不同 key（如 key="block1" / key="block2"），确保 Vue 正确识别为不同节点，避免复用 DOM 导致过渡失效；
• CSS transition 时长可差异化：例如 v-leave-active 设为 1s，v-enter-active 设为 1.5s，可使 Block 2 的入场节奏更从容，视觉上更易感知“在 Block 1 行进中途切入”；
• ease-in-out 替代 linear：让位移加速-减速更符合真实动效逻辑，提升专业感；
• 避免 overflow: hidden 意外裁剪：父容器 #app 已设 overflow: hidden，需确保 translateX(600%) 的初始位置仍在渲染范围内（通常安全，因仅影响定位不触发布局重排）。

? 进阶提示：若需精确控制“Block 2 在 Block 1 到达 50% 位移时启动”，可结合 @before-enter 钩子 + setTimeout 动态添加 class，但对多数场景而言，合理配置并行过渡的时序与缓动已足够实现流畅重叠效果。

立即学习“前端免费学习笔记（深入）”；