flex仅负责布局对齐与响应式伸缩，平滑切换需transition+transform实现；display:none/block会导致动画失效、焦点丢失、可访问性问题及布局重排；推荐opacity+visibility+translateX控制显隐，配合relative定位的flex容器和cubic-bezier缓动。
flex 本身不负责“平滑切换”，它只管布局排列；真正实现表单步骤间过渡动画的，是 transition + transform 或 opacity + 定位控制。但 flex 是让多步骤容器对齐、居中、响应式伸缩的底层支撑——没它，动画会错位、换行、或在小屏上崩塌。
为什么不能只靠 display: none/block 切换步骤
直接用 display 控制显隐会导致：
- 动画完全失效（display 不可过渡）
- 表单焦点丢失、键盘导航中断
- 屏幕阅读器可能跳过隐藏内容，影响可访问性
- 步骤容器尺寸突变，引发父容器重排，破坏布局稳定性
推荐做法是统一保留所有步骤 DOM，仅通过 opacity、visibility 和 transform: translateX() 控制可见性与位置。
flex 容器必须设为 position: relative
多步骤表单通常需要步骤卡片在同一个视觉区域内左右滑入/滑出，这就要求：
- 所有步骤 <section></section> 元素用 position: absolute 叠在一起
- 它们的父容器（即 flex 容器）必须是 position: relative，否则 absolute 子元素会脱离预期定位上下文
- 同时该容器需启用 flex 布局，用于居中、适配宽高、响应式约束（比如 max-width: 500px）
示例结构：
<div class="form-steps" style="display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%;"> <section class="step active">...</section> <section class="step">...</section> <section class="step">...</section> </div>
注意：justify-content 和 align-items 确保内容始终居中，哪怕步骤内容高度不一致。
步骤切换时，transform 比 left/top 更可靠
用 left 移动绝对定位元素会触发重排（layout），而 transform: translateX() 只触发重绘（paint），性能更好，动画更顺滑。常见错误写法：
.step:not(.active) { left: 100%; } /* 触发重排，卡顿风险高 */正确做法（配合 transition）：
立即学习“前端免费学习笔记（深入）”；
.step {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step.active {
opacity: 1;
transform: translateX(0);
}
.step.prev {
transform: translateX(-100%);
}关键点：
- cubic-bezier(0.34, 1.56, 0.64, 1) 是为“滑入”定制的缓动，比 ease-in-out 更自然
- .prev 类用于“上一步”动画，避免所有步骤都往右滑
- 必须给 .step 显式设置 width 和 height，否则 transform 可能失准
移动端要注意 focus 状态和键盘滚动
用户在手机上输入时，软键盘弹出会改变视口高度，导致 flex 容器被压缩甚至遮挡输入框。解决方法：
- 给 .form-steps 添加 scroll-margin-top: 80px，确保聚焦时自动滚动到可视区上方留白
- 所有 <input> 必须有 autofocus（仅当前步骤）或 JS 主动 .focus()
- 避免在 transform 动画进行中调用 scrollIntoView，容易冲突；建议等 transitionend 后再滚动
- 在 iOS 上，position: fixed 或 absolute 容器内 input 聚焦时可能不触发滚动，此时可临时加 min-height: 100vh 强制撑开
实际切换逻辑中，最易被忽略的是「步骤状态同步」：CSS 控制视觉，但 JS 必须同步管理 currentStep 索引、表单数据暂存、以及 aria-hidden / tabindex 的更新。动画只是表象，数据流和可访问性才是多步骤表单稳定的根基。
