直接改 width 百分比并配合 transition: width 0.3s ease 可实现进度条动画，但需满足父容器有明确宽度、子元素未被 flex/float 影响、transition 写在正确元素上；progress.value 是 dom 属性，不可直接触发 css 过渡，须通过控制伪元素或自定义 div 结构实现。
直接改 width 百分比 + transition: width 0.3s ease 就能动起来，但前提是：父容器有明确宽度、进度条子元素没被 flex 或 float 撑开、且 transition 写在对的元素上——否则动画根本不会触发。
为什么直接改 progress.value 不会触发 CSS transition
value 是 DOM 属性，不是 CSS 可动画属性。浏览器不会自动把它映射成 width 或颜色变化，所以哪怕你给 <progress></progress> 写了 transition: all 0.3s，也毫无反应。
- 真正可过渡的是伪元素的样式，比如
::-webkit-progress-value的background-color或transform - WebKit 浏览器（Chrome/Safari）靠
::-webkit-progress-value控制填充区；Firefox 靠::-moz-progress-bar（117+ 也支持::progress-value，但兼容性仍建议保留 -moz-） - 必须显式设置背景色（如
background-color: #007bff），否则即使写了transition，因无“状态差”也无法动画
用 width + transition 实现自定义进度条（非原生 <progress></progress>）
这是最可控、兼容性最好的方式：用两个 <div> 套一层，外层做容器，内层做进度填充。<ul>
<li>外层容器加 <code>overflow: hidden，防止内层溢出
height: 100% 和背景色，避免高度塌陷transition 必须写在内层元素上，推荐 transition: width 0.3s ease，别用 all
width: 0%，否则首次渲染可能跳变max-width: 100% 或固定值），否则 width: 60% 无参照用 style.setProperty 更新 CSS 变量时的常见坑
想用 --progress 控制进度？可以，但变量必须挂在进度条元素自身上，不能只写在 :root。
- JS 调用
element.style.setProperty('--progress', '65')，不是document.documentElement.style - CSS 中用
width: calc(var(--progress) * 1%)，单位不能省——'65'是字符串，calc()里乘1%才转成合法长度 - 别忘了加
transition: width 0.3s ease，CSS 变量本身不可过渡，但依赖它的width可以 - 如果多个进度条共用同一个变量名，又都从
:root读取，那它们会一起动——要各自独立，就得每个元素单独 setProperty
最容易被忽略的一点：transition 的触发依赖「计算后样式的改变」。如果你用 JS 改了 width，但该元素的盒模型被 display: flex 或 position: absolute 干扰，或者父级没设 box-sizing: border-box，width 实际没生效，动画就静默失败——先检查 computed style 里的 width 是否真在变，再调 transition。
