根本原因是缺过渡声明、层叠上下文或被overflow-hidden裁剪；必须加transition-transform或transition-shadow、duration-300、ease-out，并确保父容器无溢出隐藏、卡片有relative定位，移动端需用active或focus-within降级。
直接写 hover:translate-y-2 或 hover:shadow-xl 没反应，不是 Tailwind 写错了，而是缺了触发动画的必要条件：过渡声明、层叠上下文、或未规避裁剪限制。
为什么 hover:translate-y-[-4px] 完全不动？
根本原因是 transform 动画默认不启用过渡，浏览器不会自动给位移加缓动。即使写了 hover:translate-y-[-4px]，它也会“啪”一下跳上去，没有动画感。
- 必须显式加
transition-transform（Tailwind v3.2+）或transition（兼容旧版），再配duration-300和ease-out - 如果卡片父容器有
overflow-hidden（比如带圆角的 grid item），位移部分会被直接裁掉——这不是动画失效，是被切掉了 - Tailwind v3.1 及更早不支持方括号语法，得改用
hover:-translate-y-1（注意前面的短横线） - 移动端真机上 hover 基本不触发，别指望它生效；需要点击反馈请用
active:scale-95
为什么 hover:shadow-xl 看不出“浮起来”？
因为 shadow-xl 本身只是静态阴影值，没有过渡就等于突变。人眼感知不到“提升”，只看到一坨黑影突然变大。
- 必须配
transition-shadow（推荐）或至少transition+duration-300 - 基础态不能是
shadow-none或没阴影，否则从“无”到“强影”太突兀；建议用shadow-md作基准 - 深色模式下
shadow-xl的rgba(0,0,0,0.25)几乎不可见，要搭配dark:shadow-lg或自定义暗色阴影 - 别在 iOS Safari 上同时跑
hover:translate-y和hover:shadow-xl，二者叠加易卡顿
多卡片并排时悬停错位或遮挡怎么办？
这是 transform 不改变文档流 + 父容器布局逻辑冲突导致的，不是 bug，但很影响视觉一致性。
- 优先用
hover:scale-[1.015] origin-center替代hover:-translate-y-1，对 flex/grid 布局干扰极小 - 若坚持用位移，给卡片加
relative，再改用hover:top-[-8px]（需卡片为绝对定位子项） - 确保父容器没
overflow-hidden；如果必须保留（如带头图圆角），改用hover:mt-[-4px]绕过裁剪 - 网格中加
z-10 hover:z-20显式提层，防被相邻卡片阴影压住
真正让卡片“浮起来”的关键点
不是阴影多大、位移多高，而是变化是否平滑、是否符合物理直觉，以及是否在各种边界条件下仍可控。
-
ease-out比ease-in-out更适合上浮——结束前稍缓，模拟抬起后的惯性回落 - 避免
transition-all，它会把 padding、border 等无关属性也卷进动画，拖慢响应 - 深色模式下别硬加更黑的阴影，改用明暗反差策略：
dark:bg-gray-800 dark:shadow-lg dark:hover:shadow-xl - 真机测试前关掉系统「减少动画」设置，否则所有
transition都会被强制禁用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
