hover触发的transition未生效，是因为只在隐藏态定义了transition而可见态缺失；需在默认样式中统一设置opacity和visibility的过渡，并避免使用display:none。
hover 触发的 transition 为什么没生效
常见现象是鼠标移上去菜单不动，移开时却有淡出——说明 transition 只写在了隐藏状态（比如 opacity: 0）上，而初始可见态没配对定义。CSS 的 transition 不是“双向自动推导”，它只作用于你明确声明了变化的属性和方向。
实操建议：
- 给菜单元素同时设置「显示态」和「隐藏态」的
transition，推荐统一写在默认样式里，例如：transition: opacity 0.2s ease, visibility 0.2s ease; -
visibility必须配合opacity使用：仅靠visibility: hidden切换不会触发transition（它是离散值，无中间态），但它是解决点击穿透的关键 - 别用
display: none配transition——它不支持过渡，写了也白写
悬停菜单的延迟入场与防误触
用户快速扫过导航栏时，菜单闪现又消失，体验很差。这不是 bug，是 hover 响应太灵敏导致的。真正的解法不是加 delay 入场，而是用 transition-delay + 合理的触发区域设计。
实操建议：
- 入场不加
transition-delay，但退场加：transition-delay: 0.15s;（写在隐藏态规则里），这样鼠标无意划过不会弹，但真停住就会立刻出现 - 把
:hover绑在父容器（如nav-item）上，而不是菜单自身；菜单用position: absolute并留出 4–8px 间隙，避免鼠标移出触发器时断连 - 移动端慎用纯 hover：iOS Safari 对
:hover有延迟或不触发，需额外加touchstartJS 逻辑或改用 click 触发
transition 动画卡顿或跳变的常见原因
菜单淡入时先闪一下、位置偏移、或者动画过程中文字模糊——大概率是浏览器没走 GPU 加速，或者触发了 layout。
实操建议：
- 强制启用硬件加速：
transform: translateZ(0);或will-change: opacity, transform;（仅在必要时加，别滥用） - 避免在
transition中动画height、width、top/left等会触发重排的属性；改用transform: scaleY(0)→scaleY(1)模拟展开更顺滑 - 确保菜单父容器有明确的
overflow: hidden，否则transform动画可能溢出裁剪边界
兼容性与 fallback 处理
IE10+ 支持 transition，但 IE11 不支持 transform 在 visibility: hidden 元素上的动画表现；Safari 旧版本对 will-change 有渲染异常。不能只依赖 CSS 动画。
实操建议：
- 基础可用性优先：菜单默认
visibility: visible; opacity: 1;，hover 时只改opacity和transform，不依赖display切换 - 如果必须支持 IE9，放弃
transition，改用 JS 控制 class 切换 +setTimeout模拟延迟，再配简单 jQuery animate - 检查
prefers-reduced-motion：在媒体查询中关闭动画，@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }
真正难的不是让菜单动起来，而是让动得自然、不抢焦点、不遮挡、不误触、不卡顿——这些细节全藏在 transition 的起止状态、触发时机和渲染上下文里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
