卡片悬停抖动源于height、padding或margin变更触发重排，应改用transform: translatey()配合transition和will-change实现无抖动上浮，同时避免父容器截断动画、预占阴影边框空间并统一容器高度锚点。
卡片悬停时 height 变更必然触发抖动
直接在 :hover 里改 height、padding 或 margin，浏览器必须重排整个网格，尤其在 display: grid 或 flex-wrap 布局中，相邻卡片会瞬间跳位。这不是动画不顺的问题，是布局引擎强制刷新导致的结构性抖动。
用 transform: translateY() 替代垂直位移
卡片“上浮”效果应完全交给 transform，它不改变文档流尺寸，GPU 加速且无重排。常见错误是写 margin-top: -8px 或 top: -8px，这两者都会让父容器重新计算行高或网格轨道。
-
transform: translateY(-8px)是标准写法，数值建议控制在-5px到-12px之间 - 必须搭配
transition: transform 0.3s ease，别用all，否则可能意外触发其他属性重绘 - 加
will-change: transform提前创建合成层，iOS Safari 和低端安卓机更稳定
确保卡片容器不截断 transform 动画
如果卡片被包在 overflow: hidden、transform 或 filter 的祖先里，transform 动画会被裁剪或失效——尤其是卡片上浮时边缘被切掉，看起来像“卡住”。
- 检查父级是否有
transform: scale(1)、filter: blur(0)或will-change: opacity - 避免把卡片放在
position: relative+z-index非auto的容器内，这会创建新的层叠上下文，干扰z-index行为 - 卡片自身不要设
overflow: hidden，除非内容确实需要裁剪；否则上浮时阴影或边框可能被吞掉
阴影和边框变化也要预占空间
悬停加 box-shadow 或改 border 颜色看似安全，但如果初始没预留空间，阴影扩散或边框显形仍会轻微推挤周围元素（尤其在紧凑网格中）。
- 初始状态用
box-shadow: 0 0 0 0 rgba(0,0,0,0)占位，hover 时只改模糊半径和透明度 - 边框统一用
border: 2px solid transparent，hover 时仅变border-color，不碰宽度 - 若卡片有
border-radius，确保 hover 前后值一致，否则圆角变化也会引发微抖
align-items: stretch（Flex 默认）或 grid-auto-rows 固定高度。一旦某张卡片因内容增多撑高，又没设 min-height 或 height 锚点，整个网格就不是“悬停抖”，而是“加载即抖”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
