用max-height而非height做过渡，因height:0→auto无法触发css动画；需设足够大的安全上限并配overflow:hidden，移动端须用@media或js fallback。
为什么用 max-height 而不是 height 做过渡
因为 height: 0 → height: auto 无法触发 CSS 过渡，浏览器不知道 auto 对应的具体数值，动画直接跳变。而 max-height 是可过渡的数值属性，只要设一个足够大的“安全上限”，就能模拟出展开效果。
常见错误是把 max-height 设成 0 → 500px，但卡片内容实际只高 80px，结果动画拖沓、有明显延迟感；或者设得太小（比如 100px），内容被截断。
- 估算展开后最大高度：用浏览器 DevTools 测量真实内容高度，再加 20–30px 余量
- 不要用
max-height: none—— 它不可动画，hover 时会立刻显示 - 过渡时间建议
0.3s左右，太短生硬，太长像卡顿
overflow: hidden 必须配 max-height 才生效
很多人只加了 transition: max-height 0.3s，但忘了容器默认不隐藏溢出内容，导致 hover 前就看到详情文字从底部“挤出来”。overflow: hidden 是让裁剪生效的前提，且必须写在初始状态（非 hover 状态）里。
另一个坑是把它写在 hover 选择器里：&:hover { overflow: hidden; } —— 这没用，因为 hover 时内容已经展开了，裁剪已失效。
- 初始状态必须同时有：
max-height: 0+overflow: hidden - hover 状态只需改
max-height，别碰overflow - 如果卡片用了
border-radius，注意overflow: hidden会裁掉圆角内的内容，必要时用clip-path替代（但兼容性差）
纯 CSS 实现下，如何避免文字闪烁或布局抖动
展开瞬间文字跳一下？大概率是字体加载未完成或行高计算不稳定。更隐蔽的问题是：卡片高度由内容撑开，而 max-height 过渡过程中，父容器可能反复重排，尤其在 flex/grid 布局中。
解决方案不是加 JS，而是提前“占位”：
- 给详情区域设固定
line-height和font-size，避免字体加载导致重绘 - 初始状态加
padding-top: 0/padding-bottom: 0，hover 时再恢复，比直接动高度更稳 - 如果卡片在 grid 中，给它加
grid-row: span 2或明确min-height，防止其他卡片上蹿 - 慎用
margin控制间距——它不参与max-height计算，hover 前后视觉距离会突变
移动端点击穿透和 hover 延迟问题
在 iOS Safari 和部分安卓浏览器里，:hover 不可靠：轻点可能不触发，连点又容易误触底层链接。这不是 bug，是规范行为 —— 移动端没有真正意义上的 hover 状态。
如果你的卡片里有按钮或链接，用户点一次没反应，再点就跳走了，这就是典型的点击穿透（tap-to-click）问题。
- 对移动端，必须用
:active+ JS 切换 class，或监听touchstart模拟 hover - 纯 CSS 方案可加
@media (hover: hover) and (pointer: fine)做媒体查询，只对鼠标设备启用 hover 动画 - 别依赖
transition-delay来“修复”延迟 —— 它只是掩盖问题，实际交互依然断裂
细节决定成败：max-height 的值、overflow 的位置、移动端的 fallback，这三个地方错一个，卡片就卡在半展开状态不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
