在 Vue 过渡中，mode="out-in" 会强制旧元素完全退出后新元素才进入，导致动画割裂；若需让新元素在旧元素过渡中途（如 50% 位移时）即开始入场，应改用默认并行模式，并精细控制 CSS 过渡时序。
在 vue 过渡中，`mode="out-in"` 会强制旧元素完全退出后新元素才进入，导致动画割裂；若需让新元素在旧元素过渡中途（如 50% 位移时）即开始入场，应改用默认并行模式，并精细控制 css 过渡时序。
Vue 的
以下为优化后的完整实现方案：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
<template><div id="app">
<button>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，但对多数场景而言，合理配置并行过渡的时序与缓动已足够实现流畅重叠效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
