直接用transition-all做步进器动画会卡顿或跳变，因其强制过渡width等触发重排的属性，并在跨步跳转时从初始值重播动画；应改用transform: scaleX()替代width，配合明确起始值、will-change优化及JS状态同步。
为什么直接用 transition-all 做步进器动画会卡顿或跳变
因为 transition-all 会尝试过渡所有可动画属性，包括 width、margin、padding、box-shadow 等，而其中多数属性（尤其是 width）触发浏览器重排（reflow），导致性能下降；更关键的是，当步进器从第 1 步直接跳到第 4 步时，CSS 不会“记住”当前渲染宽度，而是从上一次声明的初始值（比如 0%）开始重跑动画，造成视觉跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用
transition-all，只启用明确可动画且高性能的属性：用transition-width或更优的transition-transform - 若用
width，必须确保起始值是具体像素或百分比（如width: 0%），绝不能是auto或未设置 - 在 JS 更新前，先读取
getComputedStyle(el).width获取当前渲染值，再计算目标值，避免“归零重播” - 对进度条容器加
will-change: transform（仅当用transform时），但别滥用——它会提前分配图层，过多反而拖慢
用 transform: scaleX() 替代 width 的真实收益与写法
transform 不触发重排，GPU 加速，比例始终相对于元素自身原始尺寸，不受父容器 padding、flex gap 干扰——这对多步骤步进器尤其关键。Tailwind 默认不提供 scale-x- 动态值，需配合内联样式或自定义工具类。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把进度条设为
absolute定位，固定宽高，避免被 flex 布局挤压变形 - 用
style={{ transform: `scaleX(${(current / (steps.length - 1)})` }}直接控制缩放比例（注意：值范围是0到1，不是百分比） - 搭配
origin-left确保缩放从左端开始，否则会居中缩放导致偏移 - 若需兼容旧版 Tailwind（v3.0 之前），手动添加
transition-transform duration-300 ease-in-out类，v4+ 可用transition-transform+duration-300
React 中步进器状态不同步导致圆点和进度条错位的根因
常见现象：点击“下一步”，圆点高亮了，但进度条没动；或进度条动了，圆点还卡在上一步。本质是两个视觉元素（圆点列表 & 进度条）依赖同一状态 current，但它们的更新时机或计算逻辑不一致——比如圆点用 item.id - 1 判断激活，而进度条用 <code>(current / (steps.length - 1)) * 100 计算宽度，当 steps.length === 1 时分母为 0，或 current 超出范围未校验，就会崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一进度比例计算：定义常量
const progressRatio = Math.max(0, Math.min(1, current / Math.max(1, steps.length - 1)))，强制约束在[0,1]区间 - 圆点判断改用
item.id - 1 = 0，防止负数索引 - 在
useEffect中监听current变化，打印progressRatio和steps.length，快速定位边界异常 - 不要在组件内直接用
console.log(current)查值——React 状态更新异步，打印的是旧值；改用useEffect(() => { console.log(current) }, [current])
如何让步进器在移动端缩放不失真、文字不溢出
步进器在小屏上最常出问题：圆点重叠、连线断裂、数字被截断。根本原因不是 CSS 写得不够“响应式”，而是布局基准没锁定——比如用 flex + justify-content: space-between，当屏幕变窄，间距压缩后，圆点会互相挤压；又或者进度条容器用了 max-w-[66.66%] 这种 magic number，无法适配不同设备。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 圆点用
flex布局时，改用gap控制间距（如gap-6），而非justify-content，确保最小间距恒定 - 进度条容器设
min-w-0防止 flex shrink 导致宽度塌陷 - 圆点内数字用
text-xs+font-medium，必要时加truncate防溢出 - 连线不用伪元素或绝对定位，改用 SVG
<line>或border-bottom配合flex-1的中间元素，更可控 - 测试时重点看
320px和375px宽度——这是绝大多数低端安卓和 iPhone SE 的视口宽度
真正麻烦的不是写动画，而是当用户狂点“下一步”、横竖屏切换、或从 URL 直接跳转到某一步时，current 状态、DOM 渲染位置、CSS 动画起点三者是否仍对齐。这时候靠纯 CSS 已经兜不住，必须在 JS 层做防御性校验和强制同步。
