hover:-translate-y-1需显式加transition-transform才生效，否则无动画；推荐组合transition-transform duration-300 ease-out；阴影应自定义分层控制，避免shadow-xl发灰；布局错位时优先用scale或top替代translate；移动端须用focus-within或active降级。
hover:-translate-y-1 本身不带过渡，必须显式加 transition-transform
直接写 hover:-translate-y-1，鼠标移入会“啪”一下跳上去，毫无动画感。Tailwind 默认的 transition 只作用于 background-color、color、opacity 等属性，对 transform 和 box-shadow 是无效的。
正确做法是组合使用：
-
transition-transform duration-300 ease-out（推荐ease-out，上浮轻快，回落沉稳） - 如果同时改阴影，再加
transition-shadow，避免只写transition-all拖慢响应 - 别用
transition单独写——它等价于transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)，会把无关属性也卷进去
shadow-md 不够“浮”，hover:shadow-xl 容易发灰，得手动分层控制
单层阴影在卡片上浮后视觉扁平，像贴纸；而盲目加大 shadow-xl 的模糊值，会让边缘泛白、失真，尤其在浅色背景上。
真实项目中更可控的做法是放弃预设阴影类，用自定义 box-shadow 配合 @layer utilities 或内联 style：
立即学习“前端免费学习笔记（深入）”；
- 基础态：
shadow-[0_2px_4px_rgba(0,0,0,0.08),_0_4px_12px_rgba(0,0,0,0.06)] - 悬停态：
hover:shadow-[0_4px_8px_rgba(0,0,0,0.1),_0_8px_24px_rgba(0,0,0,0.08),_0_16px_48px_rgba(0,0,0,0.04)] - 注意每层偏移递增、透明度递减，模拟真实光源衰减
- 超过三层阴影在低端安卓 WebView 上可能卡顿，三到四层是实用上限
Flex/Grid 布局里 hover:-translate-y-1 导致相邻卡片错位
这不是 bug，是 transform 不改变文档流，但父容器仍按原始尺寸布局。卡片上浮后，视觉上“升了”，可 Flex 行高、Grid 行隙没变，结果挤压下方元素或拉空间隙。
稳妥解法不是硬调 z-index，而是从布局逻辑入手：
- 给卡片加
relative，再用hover:top-[-8px]替代hover:-translate-y-1（仅限绝对定位子项） - 更通用：改用
hover:scale-[1.015]+origin-center，对布局影响极小 - 若必须用 translateY，给卡片父容器加
overflow-hidden，并确保卡片自身有will-change: transform提前触发 GPU 合成 - Grid 中慎用
align-self: start—— 它会干扰z-index层叠顺序，导致悬停时被遮挡
移动端 hover:-translate-y-1 基本失效，别靠媒体查询硬撑
iOS Safari 和多数安卓浏览器默认不触发 :hover，哪怕写了 @media (hover: hover)，部分 WebView（如微信内置）也会忽略该媒体查询。
关键交互不能只依赖悬停动效，降级方案要实际可用：
- 用
focus-within：给卡片加tabindex="0"，再写focus-within:-translate-y-1，点击/触碰即生效 - 更轻量：改用
active:scale-[0.98]模拟按压反馈，所有触摸设备都支持 - 如果 CMS 自动包裹了额外 DOM 层（比如 WordPress 的 block wrapper），
hover可能根本传不到卡片上——这时得 inspect 元素，确认事件目标是否被拦截
真正卡住人的从来不是 hover:-translate-y-1 这几个字符，而是它嵌套的上下文：父容器是否 overflow: hidden、移动端是否误判为指针设备、甚至你用的 UI 组件库有没有悄悄劫持了 focus 流。先看渲染树，再调 class。
