用 transition 监听上传进度根本行不通
CSS 的 transition 只能响应属性值的**离散变化**（比如从 width: 0% 到 width: 80%），它不会主动“监听” JavaScript 中的实时数值更新，更无法绑定到 XMLHttpRequest 或 fetch 的 upload.onprogress 事件。想靠纯 CSS 实现进度反馈，等于让 CSS 去读 JS 的变量——它做不到。
进度条必须由 JS 控制 width + CSS 驱动动画
真正可行的做法是：JS 拿到进度值（0–100），动态设置一个元素的 style.width；CSS 则负责定义这个宽度变化如何过渡。关键在「谁设值、谁过渡」要分清。
- 进度容器（如
.progress-bar）需设overflow: hidden，内部子元素（.progress-fill）用width表示进度 -
.progress-fill必须声明transition: width 300ms ease-out，且不能写成transition: all（避免意外触发其他属性过渡） - JS 更新时，直接操作
element.style.width = progress + '%'，不要用 class 切换模拟（没法精确到小数点后） - 初始状态建议设
width: 0%并加will-change: width（对频繁更新有轻微性能优化）
.progress-bar {
height: 4px;
background: #eee;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #007bff;
width: 0%;
transition: width 300ms ease-out;
will-change: width;
}
上传中/完成/失败的状态样式得靠 class 切换
进度条本身只反映数值，但用户需要知道“正在传”“成功了”“出错了”。这些语义状态无法用 width 表达，必须靠 JS 切换 class，再用 CSS 定义不同状态下的表现。
- 上传开始：加
is-uploading，可配合@keyframes做细微脉冲动画（非必需，但比静止更可信） - 上传完成：移除
is-uploading，加is-success，此时可把width设为100%并加绿色边框或对勾图标 - 上传失败：加
is-error，进度条变红，可加抖动动画（animation: shake 0.5s） - 注意：所有状态 class 应作用于外层容器（如
.upload-status），不要污染.progress-fill的过渡逻辑
移动端 Safari 和旧版 Chrome 的 width 过渡卡顿问题
部分浏览器在频繁设置 style.width（尤其每 50ms 一次）时，会出现掉帧或跳变，不是代码写错，而是渲染管线压力大。
立即学习“前端免费学习笔记（深入）”；
- 别用
requestAnimationFrame包裹 width 设置——它反而会放大延迟，直接同步设就行 - 限制进度更新频率：只在进度变化 ≥ 1% 时才更新 DOM，避免从 0 → 0.3 → 0.6 → 0.9 → 1.2… 这种高频小步更新
- 用
transform: scaleX()替代width是更流畅的方案（需父容器overflow: hidden配合），但要注意：scaleX(0) 会让子元素内联样式失效，图标/文字可能消失 - 真要保兼容，就老实用
width+ 合理节流，别硬上 fancy 方案
