如何在Tailwind CSS中配置transition过渡

Tailwind 的 transition 类需配合 duration 和 ease 才生效，必须在初始 class 中声明，且依赖明确的起点与终点样式；错误写法如 hover:duration-300 会导致移出无动画，正确应为 transition-transform duration-300 ease-in-out hover:scale-110。

Tailwind 的 transition 类不是“开箱即用”的动画开关，它只负责声明 CSS 的 transition-property、duration 和 timing-function，而不会自动触发变化——必须有明确的起点和终点样式，且由状态（hover、focus）或 JS 控制的 class 切换来驱动。

transition 类必须和 duration/ease 同时写在基础类中

很多人加了 transition-transform 却没动画，是因为漏掉了 duration-300 或 ease-in-out。这些类必须出现在元素初始渲染的 class 列表里，不能只放在 hover: 或 JS 动态添加的 class 里。

1. duration- 类（如 duration-300）定义过渡时长；没有它，transition-transform 就等价于 transition-duration: 0s，肉眼不可见
2. ease- 类（如 ease-in-out）控制缓动曲线；不写默认是 cubic-bezier(0.4, 0, 0.2, 1)，但显式声明更可控
3. 错误写法：transition-transform hover:scale-110 hover:duration-300 → 移出时无动画，因为 duration-300 没在常态下生效
4. 正确写法：transition-transform duration-300 ease-in-out hover:scale-110

选对 transition-property 才能动得顺

Tailwind 默认的 transition 只启用有限属性：颜色、边框、背景、opacity、transform、box-shadow 等。想让缩放、淡入、阴影都有动画，不能只靠 transition-all —— 它会把所有可变属性都拉进来，容易卡顿或抖动。

1. 高频推荐组合：transition-opacity duration-300 + opacity-0/opacity-100；transition-transform duration-300 + hover:scale-105
2. 慎用 transition-width 和 transition-height：v3.0+ 已默认禁用，因易触发重排；改用 max-w-/max-h- 配合 overflow-hidden
3. text-decoration（如下划线）不可过渡，浏览器直接忽略；要用 border-bottom 或伪元素 + scaleX(0) 模拟

JS 控制过渡时，class 切换时机很关键

用 JS 切换 opacity-0 → opacity-100 是安全的，但若切的是 hidden → block，动画直接消失——因为 display: none 不参与任何过渡。

1. 确保起始态和结束态都是「可动画属性」：优先用 opacity、transform、max-height
2. 菜单展开别写 h-0 → h-auto：改用 max-h-0 → max-h-96，并加 overflow-hidden
3. 离开动画需提前捕获 DOM 状态：比如 React 中用 useLayoutEffect 在卸载前加 animate-out 类，否则 class 一删就跳回
4. 需要禁用某次过渡？加 transition-none 到对应元素上，比如表单提交瞬间避免干扰

移动端和无障碍要注意 hover/active 的替代方案

iOS Safari 对 hover 支持不稳定，纯悬停反馈在移动设备上可能延迟或不触发；按钮点击反馈也别只依赖 active:，有些手势场景下不会触发。

1. 按钮交互建议组合：hover:scale-105 active:scale-95，同时覆盖鼠标与触摸
2. 下拉菜单改用 group-hover: 包裹触发区域，比纯 hover: 更可靠
3. 考虑系统偏好：motion-reduce:transition-none 可配合 prefers-reduced-motion 媒体查询，在用户开启“减少运动”时禁用动画
4. 别用 opacity-0 隐藏内容后还指望屏幕阅读器读取；该隐藏时用 sr-only 或 aria-hidden

最常被忽略的一点：过渡是否生效，和 Tailwind 配置无关，只取决于你有没有提供两个可计算、可插值的样式状态——浏览器不会猜你想怎么变，它只忠实地在你给的起点和终点之间做插值。写完记得检查：初始类里有没有 transition- + duration-，状态类里有没有真实改变可动画属性，以及容器有没有意外的 overflow: visible 或 position: static 干扰 transform 效果。