<p>width: var(--progress)% 不生效是因为CSS解析器不拼接字符串，需用 calc(var(--progress) * 1%) 将纯数字变量转为百分比；变量必须设在进度条元素自身，且 transition 必须作用于实际变宽的元素。</p>
直接用 style.setProperty() 更新元素自身的 --progress 变量，配合 width: calc(var(--progress) * 1%) 和 transition: width 0.3s ease 即可同步更新——关键不是“能不能”，而是变量必须挂到进度条元素本身，且值为纯数字。
为什么 width: var(--progress)% 一定不生效
CSS 解析器不做字符串拼接。写 width: var(--progress)%，浏览器会把 --progress 的值（比如 "75"）原样替换进去，得到 "75%" 这个字符串；但解析时发现这不是合法的 CSS 尺寸声明，整条规则被丢弃，width 回退到初始值（常为 0% 或 auto）。
-
--progress必须存纯数字（如75），不能是"75%"、75%或null - 单位必须由
calc()注入：width: calc(var(--progress, 0) * 1%) -
fallback写成var(--progress, 0)，不是var(--progress, 0%)——否则0% * 1%是非法表达式
变量必须挂到进度条元素自身，不能写在 :root
多个进度条共用一个 :root 变量，JS 改一次就全动；想各自独立，就得每个元素自己管自己的变量。
- 用
element.style.setProperty('--progress', '65')，不是document.documentElement.style.setProperty(...) - HTML 中可加
data-id区分：<div class="progress-bar" data-id="upload"></div> - JS 分别获取并操作：
uploadEl.style.setProperty('--progress', '82')、syncEl.style.setProperty('--progress', '47') - 检查开发者工具 Elements → Styles 面板，确认
--progress确实出现在该元素的style行内样式中
过渡动画不触发或跳变的硬性条件
哪怕语法全对，width 过渡仍可能失效，因为浏览器渲染管线需要明确的起始/结束帧来插值。
立即学习“前端免费学习笔记（深入）”；
- 进度条元素必须有明确初始宽度：
width: 0%，不能是auto、unset或未声明 -
transition: width 0.3s ease必须写在**实际变宽的元素上**（比如.progress-fill或伪元素::after），写在父容器上无效 - 避免
max-width、flex-basis干扰：显式设max-width: none或flex: 0 1 auto - 高频更新（如上传进度每 50ms 一次）易卡顿，此时改用
transform: scaleX()更稳，但需同步加transform-origin: left
真正卡点不在 JS 调用频率，而在变量是否真实挂载到每个视觉单元上——漏掉一个 style.setProperty，或错把变量挂在父级，进度条就停在那儿不动了。
