Tailwind的transition类默认不生效，必须配合状态变化（如hover、JS切换class）才能触发动画；需显式指定duration和timing函数，并确保起始与结束样式可过渡，避免误用display、height等不可动画属性。
transition 属性在 Tailwind 中默认不生效？
直接写 transition 类不会触发任何动画，因为 Tailwind 默认只启用部分过渡属性（如 opacity、transform、background-color），且需要配合状态变化（比如 hover、focus）或 JS 控制的类切换。单页应用的页面切换属于“路由级状态变更”，得靠 JS 主动增删类来驱动。
常见错误是只加 transition-all 却没配 duration-300 或 ease-in-out，结果看不出变化；或者忘了给容器设 overflow-hidden，导致 transform 动画溢出裁剪。
- 必须显式指定持续时间，例如
duration-500 - 推荐用
transform+opacity组合，性能比left/top更好 - 确保目标元素有明确的
position（如relative或absolute），否则transform可能失效
如何用 enter/leave 类实现路由切换动画？
React Router 或 Vue Router 本身不提供 enter/leave 钩子，得靠 useTransition（React）或 <transition></transition> 组件（Vue）包装路由出口。Tailwind 不内置 enter/leave 类名，需手动定义两组类：进入时加 opacity-0 translate-x-full → opacity-100 translate-x-0，离开时反向。
示例（React + React Router v6）：
立即学习“前端免费学习笔记（深入）”；
const [isPending, startTransition] = useTransition();
<div className={`transition-all duration-500 ${isPending ? 'opacity-0 -translate-x-4' : 'opacity-100 translate-x-0'}`}>
<Outlet />
</div>
- 不要依赖
key强制重渲染来触发动画，会导致状态丢失 - 离开动画需用
useLayoutEffect在 DOM 卸载前捕获元素位置，否则 class 切换太快看不到效果 - 若用
animate.css等第三方库，会和 Tailwind 的transform冲突，优先用原生类组合
为什么 fade-in 效果在 SSR 下首屏闪一下？
服务端渲染时，JS 还没执行，所有页面都以“已加载”状态输出 HTML，客户端 hydrate 后才应用初始动画类（如 opacity-0），导致视觉跳变。根本原因是服务端无法感知路由状态，也没法运行 useTransition。
- 解决方案：服务端默认渲染为
opacity-100，客户端首次加载后立即加opacity-0，再延时 1ms 触发opacity-100进入动画 - 用
useEffect而非useLayoutEffect做初始隐藏，避免阻塞渲染 - Next.js 用户可结合
usePathname+useEffect检测路由变化，但注意app目录下useEffect不会在服务端执行
移动端 Safari 上 transform 动画卡顿怎么办？
iOS Safari 对非 transform 和 opacity 的 CSS 属性动画优化差，尤其在 height、margin、padding 上容易掉帧。即使用了 transform，若父容器未开启硬件加速，也可能卡顿。
- 强制开启 GPU 加速：给动画容器加
will-change-transform或backface-visibility-hidden - 避免在动画中读取
offsetHeight等布局属性，会触发强制同步重排 - 测试时用 Safari 开发者工具的“Rendering”面板勾选 “Paint flashing”，看是否频繁重绘
复杂过渡（比如带遮罩层、多层叠加）最好拆成独立组件并用 shouldComponentUpdate 或 React.memo 控制更新范围，不然 rerender 本身就会拖慢动画。
