transition 应写在父容器（如 .step-item）上，统一控制圆点和线条的颜色变化；若线条用 ::after 生成，需为其显式声明 transition 且 content 非空。
transition 该写在哪个元素上才让圆点和线条一起动
圆点和线条颜色流转不同步，本质是 transition 没落在对的宿主上。常见错误是只给圆点加过渡，结果线条靠伪元素或兄弟节点实现，却没被触发重绘。
- 圆点（
.step-dot）和线条（.step-line）必须共用同一个「状态驱动源」，比如父容器的data-status="active"或 CSS 类名.step--current -
transition推荐写在父容器（如.step-item）上，统一控制子元素的color、background-color、border-color等可继承/影响的属性 - 若线条用
::after生成，需确保其content不为空，且transition显式写在伪元素规则里，不能依赖父级继承
color 和 background-color 的 transition 行为差异
圆点常靠 background-color 变色，线条靠 border-color 或 background-color 填充，但这两者对 transition 的响应并不一致——尤其在初始值为 transparent 时。
-
background-color: transparent到#3b82f6能平滑过渡；但border-color: transparent到#3b82f6在部分 Safari 版本中会跳变，建议改用border-bottom-color单边 +transition显式声明 - 避免用
color控制圆点，因为color不直接影响background-color，除非圆点是::before且设了background-color: currentColor - 所有参与过渡的颜色值必须是可插值的：别混用
hsl()和rgb()，也别在transparent和rgba(0,0,0,0)之间切——它们渲染表现一致，但浏览器可能视为不同类型而中断过渡
步骤激活时 transition 触发不了？检查 class 切换时机
点击后颜色瞬间变、没过渡，大概率是 class 添加后浏览器没进入重排重绘流程，或者 class 被加在了不触发样式的节点上。
- 确保 class 是通过 JavaScript 同步添加的，而不是在
setTimeout或事件队列末尾加——后者会导致样式计算延迟，错过过渡起点 - 如果用
element.classList.add("active")，紧接着读取getComputedStyle(element).backgroundColor可强制触发重排，让 transition 正常起始（仅调试时需要，生产环境慎用） - React/Vue 用户注意：状态更新是异步的，
className或绑定变化后，DOM 更新可能滞后一帧，此时直接操作 DOM 加 class 更可控</li> </ul> <H3>IE11 或旧版 Safari 下线条颜色不动</H3> <p>不是 bug，是这些浏览器不支持对伪元素的 <code>border-color
做过渡，也不支持background-color在linear-gradient背景上的插值。立即学习“前端免费学习笔记（深入）”；
- 降级方案：对
.step-line::after改用opacity过渡 + 两层线条叠加（一层默认色、一层目标色），靠透明度切换视觉效果 - 避免在
transition中写多个属性如transition: background-color 0.3s, border-color 0.3s，旧引擎可能只认第一个；拆成单独声明更稳：transition-property: background-color, border-color - 务必测试
prefers-reduced-motion: reduce场景——用户开了减少动画，你的transition会被系统忽略，得用@media (prefers-reduced-motion)关掉它
真正卡住人的从来不是怎么写 transition，而是哪个节点该响应、哪种颜色值能插值、以及 class 到底有没有真的“生效”——盯着 DevTools 的 Styles 面板看 computed 值变化，比查文档快得多。
- 降级方案：对
