直接改 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> 写了 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>）
这是最可控、兼容性最好的方式：用两个 <div> 套一层，外层做容器，内层做进度填充。
- 外层容器加
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。
