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 里。
-
duration-类（如duration-300）定义过渡时长；没有它，transition-transform就等价于transition-duration: 0s，肉眼不可见 -
ease-类（如ease-in-out）控制缓动曲线；不写默认是cubic-bezier(0.4, 0, 0.2, 1)，但显式声明更可控 - 错误写法：
transition-transform hover:scale-110 hover:duration-300→ 移出时无动画，因为duration-300没在常态下生效 - 正确写法：
transition-transform duration-300 ease-in-out hover:scale-110
选对 transition-property 才能动得顺
Tailwind 默认的 transition 只启用有限属性：颜色、边框、背景、opacity、transform、box-shadow 等。想让缩放、淡入、阴影都有动画，不能只靠 transition-all —— 它会把所有可变属性都拉进来，容易卡顿或抖动。
- 高频推荐组合：
transition-opacity duration-300+opacity-0/opacity-100；transition-transform duration-300+hover:scale-105 - 慎用
transition-width和transition-height：v3.0+ 已默认禁用，因易触发重排；改用max-w-/max-h-配合overflow-hidden -
text-decoration（如下划线）不可过渡，浏览器直接忽略；要用border-bottom或伪元素 +scaleX(0)模拟
JS 控制过渡时，class 切换时机很关键
用 JS 切换 opacity-0 → opacity-100 是安全的，但若切的是 hidden → block，动画直接消失——因为 display: none 不参与任何过渡。
立即学习“前端免费学习笔记（深入）”；
- 确保起始态和结束态都是「可动画属性」：优先用
opacity、transform、max-height - 菜单展开别写
h-0→h-auto：改用max-h-0→max-h-96，并加overflow-hidden - 离开动画需提前捕获 DOM 状态：比如 React 中用
useLayoutEffect在卸载前加animate-out类，否则 class 一删就跳回 - 需要禁用某次过渡？加
transition-none到对应元素上，比如表单提交瞬间避免干扰
移动端和无障碍要注意 hover/active 的替代方案
iOS Safari 对 hover 支持不稳定，纯悬停反馈在移动设备上可能延迟或不触发；按钮点击反馈也别只依赖 active:，有些手势场景下不会触发。
- 按钮交互建议组合：
hover:scale-105 active:scale-95，同时覆盖鼠标与触摸 - 下拉菜单改用
group-hover:包裹触发区域，比纯hover:更可靠 - 考虑系统偏好：
motion-reduce:transition-none可配合prefers-reduced-motion媒体查询，在用户开启“减少运动”时禁用动画 - 别用
opacity-0隐藏内容后还指望屏幕阅读器读取；该隐藏时用sr-only或aria-hidden
最常被忽略的一点：过渡是否生效，和 Tailwind 配置无关，只取决于你有没有提供两个可计算、可插值的样式状态——浏览器不会猜你想怎么变，它只忠实地在你给的起点和终点之间做插值。写完记得检查：初始类里有没有 transition- + duration-，状态类里有没有真实改变可动画属性，以及容器有没有意外的 overflow: visible 或 position: static 干扰 transform 效果。
