transition必须写在被悬停的卡片容器默认状态中，而非:hover伪类里；否则移入无动画、移出才过渡，且易导致卡顿或闪跳，正确做法是在.card等基础选择器中声明transition属性。
transition 用在哪个元素上才生效
必须写在被悬停的卡片容器本身，而不是 :hover 伪类里。很多人把 transition 只加在 :hover 块里，结果鼠标移入没动画、移出才有——这是错的。
正确做法是：给卡片的默认状态（非 hover）设 transition，让浏览器知道“接下来哪些属性变化要走过渡”。例如：
.card {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
-
transition必须写在默认状态（.card），不能只写在.card:hover - 多个属性过渡要显式列出，或用
all 0.3s ease（但不推荐，可能意外触发重排） - 避免对
height、width等触发布局计算的属性做过渡，性能差
为什么 transform 比 top/margin 更适合悬停位移
用 top 或 margin-top 移动卡片会触发浏览器重排（reflow），而 transform: translateY() 属于合成层操作，GPU 加速，动画更顺滑，尤其在低端设备上差异明显。
- ❌
top: -4px→ 触发 layout + paint - ✅
transform: translateY(-4px)→ 仅 composite，无重排 - 如果卡片有
position: relative才能用top，但没必要——transform不依赖定位
hover 动画卡顿或闪跳的常见原因
最常踩的坑是父容器设置了 overflow: hidden，而悬停时卡片超出原尺寸（比如阴影变大、内容上浮），导致边缘被裁切，视觉上像“闪一下”或“突然消失”。
- 检查卡片父容器是否带
overflow: hidden，临时改成visible测试是否改善 - 阴影扩大时，
box-shadow的模糊半径（如12px）会让渲染区域变大，需预留空间或用will-change: transform提前提示合成 - 不要在
:hover中改display（如display: none → block），这无法过渡，只会突变
移动端 hover 效果不可靠怎么办
手机没有 hover 概念，iOS Safari 和多数安卓浏览器对 :hover 支持有限——通常只在点击后短暂生效，或干脆忽略。纯 CSS 悬停在移动端基本等于失效。
- 真需要交互反馈，改用
:active（点击瞬间）或配合 JavaScript 监听touchstart/touchend - 或者用媒体查询降级：
@media (hover: hover) and (pointer: fine)包裹 hover 样式，确保只在支持设备上加载 - 别依赖 hover 做关键功能入口，比如“悬停才显示删除按钮”——移动端用户根本点不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
