缺起始态与结束态的样式差异，transition类仅定义过渡方式，需配合hover、JS切换等触发状态变化，且须选用可动画属性如transform、opacity，避免width、height、display等不可过渡属性。
transition类加了但没动画，到底缺哪一步？
Tailwind 的 transition 类本身只是设置 CSS 的 transition-property、transition-duration 等声明，它不负责“变”——只负责“怎么变”。没有起始态和结束态的样式差异，就根本不会触发过渡。
常见卡点：
- 只写
div transition-all，但没配hover:bg-blue-500或 JS 切换的 class - 用
hover:underline期望下划线淡入，但text-decoration不支持过渡，浏览器直接忽略 - 对
display: none或height: auto直接加transition，这两者不可动画，过渡完全失效
正确姿势永远是成对出现：一个基础样式 + 一个状态变更类（hover:、group-hover:、或 JS 控制的 class 切换）。
哪些属性能真正平滑过渡？别硬刚 width/height
不是所有 CSS 属性都适合做 transition。选错目标，动画就卡顿或压根不动。
立即学习“前端免费学习笔记（深入）”；
推荐优先用：
-
transform和opacity：GPU 加速，无重排，最稳。搭配transition-transform+hover:scale-110或transition-opacity+opacity-0 -
max-height：适合菜单展开/收起，但必须设足够大的目标值（如max-h-96），不能用max-h-full -
border-bottom-width或伪元素scaleX()：替代text-decoration做下划线滑入，避免重排
要避开：
-
width/height：易触发重排；Tailwind v3.0+ 默认禁用transition-width -
transition-all：会连box-shadow、filter一起过渡，可能抖动或卡顿 -
display、z-index、font-size（部分浏览器不支持）等不可过渡属性
JS 控制过渡时怎么不卡顿？别读 clientHeight，也别切一堆 w-* 类
JS 动态更新状态时，性能崩塌往往来自隐式重排。
关键实操点：
- 别反复读取
offsetWidth、clientHeight—— 这会强制同步布局计算 - 别用
classList.toggle('w-1/4', 'w-1/2')模拟宽度变化；改用el.style.transform = 'scaleX(0.7)' - 批量更新走
requestAnimationFrame：比如raf(() => el.style.transform = <code>scaleX(${progress})) - 长时动画（>500ms）可加
will-change: transform提示浏览器优化，但别滥用，否则反而拖慢首次渲染 - Flex 容器里做
scaleX动画，记得给父容器加min-w-0，否则gap或 flex 自动撑宽会让缩放失效
多阶段变换怎么写？transition 不行，得靠 animate 或 JS 分步控制
Tailwind 的 transition 只支持两态（起始 → 结束），没法描述“先缩放、再平移、最后旋转”这种多阶段过程。
可行方案：
- 纯 CSS 关键帧：在
tailwind.config.js里定义@keyframes，注册为自定义animate-类，比如animate-bounce-in - JS 分步控制：用
setTimeout或Promise链切换不同 class，例如先加scale-50，再加translate-x-4，最后加rotate-12，每步间隔 100ms - 第三方库辅助：如
framer-motion或GSAP，但会增加 bundle 体积；轻量场景建议优先用原生 keyframes + Tailwind 工具类组合
真正容易被忽略的是：多阶段动画里，每个阶段的 timing-function 和 duration 往往需要单独调优——比如入场用 ease-out，位移用 ease-in，旋转用 linear，混用一套 ease-in-out 会让节奏失衡。
