如何在Tailwind CSS中实现进度条动画_结合transition与width-css教程-PHP中文网

tailwind 默认不支持 width 过渡动画，需用 transition-[width] 配合内联 style="width: x%" 实现平滑动画，类名切换（如 w-1/2）无法插值。

如何在tailwind css中实现进度条动画_结合transition与width

为什么直接用 `transition` 动画 `width` 在 Tailwind 里不生效

因为 Tailwind 默认只对 transform、opacity、background-color 等少数属性启用过渡动画，width 不在默认列表里。直接写 transition-width 或 transition-all 也无效——除非你手动扩展配置。

检查你的 tailwind.config.js 是否启用了 width 的 transition 支持（默认没开）
即使开了，用百分比宽度（如 w-1/2）或任意值（如 w-[65%]）时，浏览器无法对 CSS 类切换做插值动画，本质是“类名切换”，不是连续数值变化
更可靠的方式是用内联 style 控制 width，再配合 transition 声明

用 `transition-[width]` + 内联 `style` 实现平滑动画

这是最可控、兼容性好、无需改配置的做法。核心是：让 Tailwind 处理过渡声明，让 JS 或服务端控制具体宽度值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

进度条容器加 bg-gray-200 rounded-full h-2
内部条用 bg-blue-500 h-2 rounded-full transition-[width] duration-300 ease-out
通过 style="width: 72%" 动态设置实际宽度（注意必须带百分号）
不要用 w-3/4 这类工具类替代 style，否则无动画

<div class="bg-gray-200 rounded-full h-2">
  <div class="bg-blue-500 h-2 rounded-full transition-[width] duration-300 ease-out" style="width: 72%"></div>
</div>

如果坚持用纯工具类，得靠 `@apply` 或自定义 `transition`

Tailwind 不支持 transition-width 工具类，但你可以手动注入：

在 tailwind.config.js 的 theme.transitionProperty 中添加 width
然后用 transition-property: width 对应的工具类（需开启 plugins: [require('@tailwindcss/forms')] 或自行写插件）
更简单的是在 CSS 中用 @layer utilities 补一个：@apply transition-[width] duration-300
但即便如此，仍需用 style 设置宽度——工具类本身不提供可变宽度值

动画卡顿或跳变的常见原因

不是写法错，而是触发了非合成层渲染或布局抖动：

用 height 或 margin 配合 width 动画？会强制重排，优先改用 transform: scaleX()（但需额外处理对齐和 overflow）
在 React/Vue 中频繁 setState / reactive 更新，建议加防抖或用 requestAnimationFrame 节流
初始状态没设 width: 0%，导致第一次动画从 auto 开始，浏览器无法插值 → 务必初始化内联 style="width: 0%"
使用 max-w-full 或 min-w-0 防止父容器干扰宽度计算