用 transition 配合 width 实现响应式进度条最可控，需设初始 width、transition 和 overflow: hidden，确保 box-sizing: border-box，避免 auto 宽度和同步布局，js 安全更新应节流并重置时先归零。

用 transition 配合 width 实现带动画的响应式进度条，是当前最可控、兼容性最好、也最容易调试的方案。它不依赖 @keyframes 写死时长，也不强求浏览器支持 CSS 变量——只要设对初始值、过渡属性和容器约束，JS 一改 style.width 就能动起来。

为什么 transition: width 常常不动或跳变

不是 transition 本身有问题，而是它对“可动画性”有隐含要求：

• width 必须是具体值（如 0%、50px），不能是 auto 或未声明
• 必须在「起始状态」就写上 transition: width 0.3s ease，不能等 JS 改完再加
• 父容器没设 overflow: hidden，进度条溢出看不见，误以为“没动”
• 元素有 padding 或 border，但 box-sizing 不是 border-box，导致宽度计算错位
• JS 频繁读写 offsetWidth 触发同步布局，卡顿到动画被跳过

如何让 width 过渡真正响应式

百分比本身是响应式的，但需要容器提供可靠参照：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 进度条容器必须有明确宽度：比如 max-width: 100%、width: 100%，或设为 flex 子项并配 flex: 1
• 内部填充元素用 display: block + height: 100%，避免高度塌陷
• 统一设 box-sizing: border-box，防止 padding/border 挤占 width 空间
• 移动端慎用 vw 做进度基准，iOS Safari 地址栏收起时视口变化会导致突变

JS 更新 width 的安全写法

直接赋值 el.style.width = '65%' 最简单，但要注意节奏和中断处理：

• 避免连续快速调用（如每 10ms 改一次），推荐节流或用 requestAnimationFrame 驱动
• 如果进度要重置，先设回 0%，再设目标值，否则可能跳到终点再回退
• 不要用 max-width 或 flex-basis 替代 width——它们不触发同一类重排逻辑，transition 不生效
• 若需多个进度条共用逻辑，用 CSS 自定义属性 --progress + width: calc(var(--progress) * 1%) 更干净，但 IE11 不支持，得降级

别踩 <progress></progress> 的坑

原生 <progress></progress> 元素的 value 属性不可被 CSS transition 直接驱动：

• transition: width 0.3s 写在 <progress></progress> 上完全无效
• WebKit 内核可用 ::-webkit-progress-value 伪元素 + background-color 过渡模拟，但 Firefox 和新 Edge 行为不一致
• 真正稳定的做法：放弃 <progress></progress>，用 <div role="progressbar" aria-valuenow="65"> + 自定义填充层<p>最易忽略的一点：动画是否「看起来顺」，往往取决于第一次渲染有没有 <code>width: 0% 初始值。没设这个，首次更新就是跳变——不是 bug，是浏览器没东西可过渡。