tailwind默认不支持width过渡动画，因width不在默认transitionproperty列表中且易触发重排；需手动配置启用或改用transform: scalex()方案实现流畅动画。
为什么直接用 width + transition 会失效
Tailwind 默认的 transition 工具类（如 transition-all 或 transition-width）只对「可过渡的 CSS 属性」生效，而 width 在 Tailwind v3.0+ 中**默认不被纳入 transition-width 的支持列表**——因为 width 变化常触发重排（layout thrashing），性能敏感。你写 transition-width duration-500 却发现没动画，大概率是这个原因。
解决办法不是换库，而是显式启用 width 的过渡能力：
- 在
tailwind.config.js的theme.transitionProperty中手动加入'width' - 或改用更稳妥的
scaleX+transform方案（见下一条）
用 scaleX 替代 width 实现流畅过渡
transform 属性天生支持 GPU 加速，且不会触发重排，比直接改 width 更可靠。进度条本质是「从左向右伸展」，正好对应 scaleX(0) → scaleX(1)。
实操示例：
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-blue-500 origin-left transition-transform duration-700 ease-out" style="transform: scaleX(0.6);"></div> </div>
关键点：
-
origin-left确保缩放以左侧为基点，否则会居中拉伸 -
scaleX值范围是0–1，对应 0%–100%，别用百分比字符串（如'60%'） - 若用 JS 动态更新，直接改
style.transform，不要反复切换 class
配合 JS 控制进度时如何避免卡顿
常见错误是每次更新都触发重排，比如用 element.classList.replace() 切换一堆 w-[...] 类；或者用 offsetWidth 强制同步读取导致布局抖动。
正确做法：
- 用
requestAnimationFrame批量更新，例如：raf(() => el.style.transform = `scaleX(${progress})`) - 初始状态设为
scaleX(0)，并加will-change: transform（仅对长时动画必要） - 避免在循环中读取
clientWidth、offsetHeight等触发重排的属性
响应式进度条要注意的宽度继承问题
如果父容器用 flex 或 grid 布局，子进度条可能因 min-width: 0 缺失而撑开容器——尤其在移动端窄屏下，scaleX 再小，元素本身仍有默认最小宽度。
修复方式：
- 给进度条容器加
min-w-0 - 进度条自身加
flex-shrink-0防止被压缩变形 - 不用
max-w-full，改用w-full+min-w-0组合更可控
复杂点往往不在动画逻辑，而在父容器的 flex/gap/border-box 计算和 scale 变换坐标的隐式依赖。动手前先 inspect 元素看 computed transform-origin 和 box-sizing 是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
