用 transform: scalex() 替代 width 实现进度条更稳定，因其不触发重排、仅走合成层；需设 overflow: hidden、transform-origin: left center、初始 scalex(0)，配合 css 变量 --progress 由 js 动态控制。
用 transform: scaleX() 替代 width 动画更稳
直接改 width 会触发重排，尤其在 flex 或 position 变换的父容器里容易错位、跳动；transform: scaleX() 只走合成层，不打断渲染流水线，动画顺滑且兼容性好（IE10+ 都支持）。关键不是“能不能动”，而是“动得准不准、停得稳不稳”。
必须满足三个条件：
– 进度条容器设 overflow: hidden 和固定 height
– 内部条元素设 transform-origin: left center
– 初始 transform: scaleX(0)，目标 transform: scaleX(1)
别用 max-width 或 flex-basis 模拟进度——它们不响应同一套 layout 触发逻辑，JS 更新后常有延迟或不生效。
用 @keyframes + animation 而非 transition
transition 适合“状态切换”，比如 hover 时展开；但进度条是单向、有时长、需暂停/终止的流程，@keyframes 才能精确控制起始点、缓动曲线和播放行为。比如用 cubic-bezier(0.34, 1.56, 0.64, 1) 模拟真实加载感：起步快、中间匀速、收尾稍顿。
常见错误：
– 把 animation 加在容器上，结果内部元素溢出
– 忘记加 forwards，动画一结束就回退到 0 状态
– 在 @keyframes 里写 width: 0% → 100%，却没给元素设初始 width: 0%，导致第一帧就跳变
用 CSS 自定义属性 --progress 接入 JS 控制
纯 CSS 动画只能“跑完即止”，但真实场景需要“加载完成就停在 100%”或“失败时变红”。这时候不能删动画，而要用变量接管：定义 --progress: 0，再让 transform: scaleX(var(--progress)) 响应它。
JS 更新只需一行：element.style.setProperty('--progress', progressValue)
注意：
– progressValue 是 0～1 的小数（如 65% 填 0.65）
– 不要写成 '65%'，scaleX() 不认百分比单位
– 若用了 CSS-in-JS 库（如 Emotion），确保变量注入时机早于动画首次计算，否则首帧会闪一下
别忽略容器尺寸与动画时长的匹配
硬写 animation-duration: 1s 很危险：首屏图片还没解码完，进度条已跑到头，用户觉得“假”。合理做法是把动画总时长设为略长于预期最大加载耗时（比如 3.5s），再靠 JS 提前终止。
另外两个易漏点：
– 容器没设明确 width（如 100% 或具体像素），scaleX() 缩放会失真
– 给进度条加 border-radius 后再跑动画，iOS Safari 上容易卡顿——圆角参与重绘，建议用伪元素遮罩替代圆角裁剪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
