hover菜单动画失效是因为transition未写在默认状态；应设于基础选择器如.menu-item，仅过渡color、opacity等合成层属性，避免height等触发布局计算的属性。
hover菜单没动画？检查transition是否写对了位置
很多同学把transition加在:hover伪类里，结果鼠标移上去还是“啪”一下变色——过渡根本没生效。因为transition必须写在**默认状态（非:hover）** 的规则中，浏览器才能知道“从什么状态开始过渡”。
-
transition要写在基础选择器上，比如.menu-item，而不是.menu-item:hover - 只过渡想动的属性，别写
transition: all .3s，容易误触其他变化（比如意外触发box-shadow或transform重绘） - 常用组合是
transition: background-color .2s, color .2s，明确控制哪些值渐变、多久完成
文字颜色+背景色一起变，为什么hover时有闪烁或卡顿
本质是浏览器渲染策略问题：如果background-color和color同时过渡，但其中某个值触发了重排（比如背景用了linear-gradient且含百分比），就可能掉帧。更稳的做法是只让color过渡，背景用纯色+opacity微调。
- 避免在
transition中包含height、width、top/left等触发布局计算的属性 - 优先用
transform和opacity做动效，它们走合成层，性能好得多 - 示例：
.menu-item { transition: color .2s, opacity .2s; } .menu-item:hover { color: #007bff; opacity: 0.95; }
移动端点击无hover效果？不是bug，是设计限制
iOS Safari 和部分安卓浏览器在触摸设备上默认不触发:hover，除非用户真“悬停”（比如用触控笔长时间停住）。这不是你CSS写错了，而是交互模型不同。
- 不要依赖
:hover实现核心功能，比如展开子菜单——得补:focus和:active，并用tabindex确保键盘可访问 - 真要兼容触摸，可以用
@media (hover: hover)做媒体查询隔离，把hover样式包在里面 - 或者改用
JavaScript监听touchstart加临时类，但注意避免点透和重复触发
子菜单下拉动画卡顿？别直接transition height
给height加transition看似简单，但height: 0 → auto无法过渡（auto不是数值），强行设固定高度又不灵活。这是最常踩的坑。
- 正确做法是用
max-height过渡，比如max-height: 0→max-height: 300px，再配合overflow: hidden - 记得设足够大的
max-height上限（比如300px），否则内容多时会被截断 - 更现代的方案是用
transform: scaleY(0)→scaleY(1)，配合transform-origin: top，性能更好也更可控
过渡的真正难点不在写几行CSS，而在判断哪个属性该动、哪个不该动，以及它在不同设备上的表现是否一致。hover只是个触发时机，背后得想清楚“变什么”和“怎么变才不翻车”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
