--progress变量需设为带%单位的初始值（如0%），通过element.style.setproperty()动态更新，配合css中var(--progress)和transition实现进度条动画；避免无效值、跨层级读取及同步布局操作。
怎么用 --progress 变量控制进度条宽度
CSS变量本身不能被JavaScript直接“监听”，但可以被style.setProperty()动态修改，只要HTML元素的width用calc()或var()绑定该变量，就能触发重绘。关键不是“响应式”，而是“手动触发更新”。
常见错误是写成width: var(--progress);却不带单位——CSS变量值必须包含%或px等单位，否则无效。
-
--progress的初始值建议设为0%（带百分号），不是0 - HTML中需用
style内联写法或element.style.setProperty('--progress', '35%')更新 - 不要在伪元素（如
::after）里读取父元素的--progress再做计算——部分浏览器不支持跨层级变量继承
div.progress-bar {
--progress: 0%;
height: 8px;
background: #e0e0e0;
}
div.progress-bar::after {
content: '';
display: block;
height: 100%;
width: var(--progress);
background: #4caf50;
transition: width 0.3s ease;
}
为什么transition有时不生效
本质是CSS动画对“非数值型变化”无能为力：var(--progress) 是一个字符串替换，如果变量值从 '20%' 变成 '40%'，浏览器能识别为可插值；但如果中间某次设成了 'auto' 或空字符串，整个过渡链就断了。
- 确保每次设置的值都符合
number + %格式，例如'75%'，不能是75或'75' - 避免用
getComputedStyle(el).getPropertyValue('--progress')做条件判断后再设值——它返回的是计算后值，可能含空格或单位重复 - 如果需要从0开始动画，别依赖初始
style属性，用el.style.setProperty('--progress', '0%')先重置一遍
兼容性与性能要注意什么
CSS自定义属性在IE全系不支持，Edge 15+ 开始支持；transition 在width上表现稳定，但若用transform: scaleX()替代，性能更好（尤其大量进度条同时动时）。
- 移动端iOS Safari 9.3+ 支持
--var，但旧版微信内置浏览器（X5内核）可能不支持transition作用于var()结果 - 如果页面有几十个进度条，用
transform比width更省重排（reflow） - 不要在
@keyframes里引用var(--progress)——动画帧无法读取运行时变量值
/* 更优写法（性能向） */
div.progress-bar::after {
transform: scaleX(calc(var(--progress) / 100));
transform-origin: left;
}
JS更新--progress的最小可靠写法
最简路径就是直接操作element.style，别绕道class或CSSOM查询。容易踩的坑是：多次连续setProperty被合并，导致中间态丢失；或者用requestAnimationFrame时没清空上一帧定时器。
- 用
el.style.setProperty('--progress', value + '%')，value 确保是0–100之间的数字 - 如果要匀速动画，别用
setTimeout递增，改用requestAnimationFrame+ 时间戳计算当前进度 - 避免在循环里反复调用
getComputedStyle—— 它强制同步布局，拖慢渲染
复杂点在于：当进度来自异步数据流（比如WebSocket推送），你得自己做节流，不然每毫秒一次setProperty，浏览器根本来不及渲染，还可能卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
