因为w-1/2等宽度类对应固定CSS声明，class切换不触发插值过渡；transition-all仅对可插值属性（如style.width、CSS变量）有效，且必须作用于实际变化的元素。
为什么直接用 w-1/2 + transition-all 做不了水平进度条动画
因为 w-1/2 这类宽度类是静态的 CSS 类，背后对应的是 width: 50% 这样的固定声明。浏览器在 class 切换时不会插值过渡——它只做“替换”，不是“动画”。transition-all 对这种离散 class 切换完全无效。
真正能触发平滑过渡的，是那些**可被浏览器插值计算的属性变化**，比如内联 style.width、CSS 自定义变量（--progress）配合 width: clamp(...) 或 width: calc(...)，或者用 @keyframes 配合 animate-[]。
- 别把
transition-all加在容器上就以为万事大吉，它必须作用于实际发生数值变化的元素上 - 如果用 JS 改
element.className来切换宽度类，动画一定卡顿或消失 - 移动端 iOS Safari 对 class 切换 + transition 的兼容性尤其差，容易直接跳变
用 CSS 变量 + JS 动态更新实现可过渡的水平进度条
核心思路：把进度值存为 CSS 自定义变量（如 --progress: 0），再让进度条的 width 依赖这个变量，JS 只负责改变量，CSS 负责过渡。
示例结构：
立即学习“前端免费学习笔记（深入）”；
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
<div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-blue-500 transition-all duration-300"
style="width: calc(var(--progress, 0) * 1%) ">
</div>
</div>JS 更新方式（不操作 class，只设 style 变量）：
const bar = document.querySelector('.bg-blue-500')
bar.style.setProperty('--progress', 65) // 进度 65%-
calc(var(--progress, 0) * 1%)是关键：避免直接写width: var(--progress)（浏览器不识别单位） - 务必加
transition-all duration-300到进度条元素本身，不是外层容器 - 外层容器必须有
overflow-hidden，否则进度条超出部分会漏出来 - 不要用
max-w-full或flex-1等弹性尺寸控制进度条宽度，它们会干扰 width 计算
滚动容器里嵌进度条，为什么滚动时条跟着动？
常见于日志面板、侧边菜单等场景：容器设了 overflow-y-auto，但进度条也跟着一起滚动，而不是固定在顶部或底部。
根本原因是进度条没脱离文档流。解决办法只有两个方向：
- 给进度条加
position: sticky; top: 0;（需父容器有明确高度且非transform包裹） - 或者把进度条提到滚动容器外部，用绝对定位 + JS 同步滚动位置（例如监听
scroll事件读取scrollTop） - 千万别把进度条放在
flex-1子项里还指望它固定——Flex 容器会把它当普通子元素布局 - 如果用了
transform（比如scale或translateZ）包裹滚动容器，sticky会失效，只能选绝对定位方案
移动端滚动+进度更新容易掉帧，怎么稳住
iOS Safari 对频繁读写 scrollTop 或反复设置 style.width 极其敏感，尤其在 scroll 事件里直接更新，极易卡顿。
- 用
requestIdleCallback或节流（throttle）包装进度更新逻辑，比如每 100ms 最多更新一次 - 避免在循环中调用
getBoundingClientRect()或offsetHeight，这些会强制同步布局 - 进度条 DOM 尽量轻量，不要带阴影、渐变、filter 等重绘开销大的样式
- 如果只是指示“当前阅读位置”，优先用
position: sticky+top: 0，比 JS 计算更稳定
最易被忽略的一点：transition 的 duration 不宜低于 150ms，太短在低端设备上反而看起来“抖”；也不宜超过 400ms，否则用户感知延迟明显。300ms 是兼顾响应与流畅的甜点值。
