进度条用 transition 不动的直接原因是未在 css 中声明 transition 属性；须写 transition: width 0.3s ease，或改用性能更好的 transform: scalex() 避免重排。
进度条宽度用 transition 为什么不动？
直接原因：CSS transition 不触发，多半是因为你改的是内联样式（比如 element.style.width = '50%'），但没提前在 CSS 里声明可过渡的属性和时长。
- 必须在 CSS 中显式写上
transition: width 0.3s ease;，光靠 JS 改值不会自动启用过渡 - 如果用
transform: scaleX()替代width，性能更好，且无需担心盒模型重排，推荐优先用这个 - 别对
display: none的元素做 width 过渡——它压根不参与渲染，transition 完全失效
requestAnimationFrame 控制进度更新更顺滑
用 setTimeout 或 setInterval 更新进度条宽度，容易卡顿或跳变，尤其在低帧率设备上。
- 把宽度更新逻辑包进
requestAnimationFrame，能对齐屏幕刷新节奏 - 避免在每次更新时反复读取/写入
offsetWidth或style.width，这会强制同步回流 - 示例：不是
el.style.width = progress + '%';写十次，而是算好最终值，再一次性设 —— 或者用transform避免 layout
百分比宽度在 flex 容器里突然“失灵”
顶部进度条常放在 display: flex 的 header 里，这时 width: 50% 可能被 flex 项目默认行为（如 flex-shrink）压制，导致过渡看起来卡住或归零。
- 给进度条加
flex: none;或flex-shrink: 0;，防止它被压缩 - 确保父容器有明确宽度（比如
width: 100%或固定值），否则子元素的百分比无基准 - 如果用
max-width限制进度条长度，记得 transition 也要覆盖它，否则只动 width 会“冲出”限制
移动端 Safari 对 transition 的兼容细节
iOS 15 以前的 Safari 对 width + 百分比 + transition 的组合支持不稳定，尤其配合 position: fixed 的顶部条时，可能出现闪动或跳帧。
立即学习“前端免费学习笔记（深入）”；
- 改用
transform: scaleX()是最稳妥的解法，所有现代 iOS 版本都支持且硬件加速 - 避免在过渡期间动态修改
transform-origin，会打断动画队列 - 如果必须用 width，请加上
-webkit-transform: translateZ(0);强制开启 GPU 加速（仅限老版本 Safari）
真正麻烦的不是怎么让进度条动起来，而是它在不同容器、不同浏览器、不同更新节奏下，transition 的触发条件和生效边界总在变。多试一次 transform，少调十分钟 width 和 overflow。
