百分比width过渡不生效是因为CSS无法对依赖父容器的相对值插值，需父宽固定；transform:scaleX()性能更优但不改变布局，width需配合will-change；JS推荐用class控制，移动端Safari需加min-width:0防跳变。
用 transition 动画宽度时，为什么百分比不生效？
直接写 width: 0% → width: 85% 不会动，因为 CSS 过渡只对「可计算的数值型属性」起作用，而百分比本身不是绝对值——它依赖父容器宽度。浏览器无法在动画帧之间插值两个相对单位，除非父容器宽是固定像素值（比如 width: 300px）。
实操建议：
- 给进度条容器设明确的
width（如max-width: 400px或直接width: 100%+ 父元素定宽） - 进度条内部元素用
width+transition: width 0.4s ease，不要加!important覆盖内联 style - 避免用
vw/vh做基准，它们在 resize 时重排剧烈，动画易卡顿
width 过渡 vs transform: scaleX()，哪个更稳？
width 过渡会触发 layout（重排），尤其在复杂 DOM 下帧率掉得明显；transform 属于合成层操作，GPU 加速，性能好得多，但要注意：它只缩放视觉，不改变实际布局尺寸。
实操建议：
- 纯视觉进度条（比如加载蒙层、状态指示器）优先用
transform: scaleX(0.72) - 需要配合文字居中、图标对齐或响应点击区域的，必须用
width，并加will-change: width提前提示渲染引擎 - 别混用：同时设
width和transform容易导致视觉错位，浏览器不会自动协调两者动画节奏
JavaScript 更新进度时，style.width 和 classList 哪个更合适？
直接操作 element.style.width = '63%' 看似简单，但一旦 CSS 里写了 !important 或媒体查询覆盖，JS 设置会被静默忽略；用 class 控制则更可控，也方便主题切换。
实操建议：
- 预定义一组 class：
progress-0、progress-25、progress-50… 配合transition使用 - 动态值（如 37%）必须 JS 控制时，改用
element.style.cssText = 'width: 37%; transition: width 0.3s ease;'，避免多次 style 赋值打断过渡 - 注意百分比字符串末尾必须带
%，漏掉就变成width: 37（非法值，退化为 auto）
移动端 Safari 上动画卡顿或跳变，怎么调？
iOS 15+ 的 Safari 对 width 过渡有额外限制：如果父容器用了 flex 或 grid，且子项没设 min-width: 0，动画过程中可能突然重算尺寸，造成跳变。
实操建议：
- 进度条容器加
min-width: 0，强制其遵守 flex/gird 最小尺寸约束 - 禁用缩放干扰：
-webkit-transform: translateZ(0)或transform: translateZ(0)强制启用 GPU 层 - 别用
requestAnimationFrame手动驱动 width 变化——现代 CSS 过渡足够可靠，自己写反而增加出错点
真正难的不是让进度动起来，而是让它在各种嵌套布局、不同设备缩放、主题切换下都保持节奏一致。很多“动画失效”其实不是 CSS 写错了，是父容器的 display 或 overflow 在暗地里截断了渲染管线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
