全屏导航菜单点不动、卡顿、关不掉的核心原因是pointer-events配置错误和显隐逻辑不当：必须用opacity+visibility+pointer-events组合替代display:none，显式设置pointer-events: auto，并统一使用transform动画，同时正确控制body overflow与视口单位。
移动端全屏导航菜单点不动、动画卡顿、关不掉，基本都卡在 pointer-events 和显隐逻辑上。别用 display: none 控制开关，也别只靠 opacity 就完事。
为什么点击菜单没反应？检查 pointer-events 是否被锁死
常见错误是父容器（比如 .header）设了 pointer-events: none，或者菜单自身用了 opacity: 0 却没同步关掉交互能力。浏览器看到“透明但可点”，实际判定为“不可点”。
-
.menu-overlay必须显式写pointer-events: auto，不能依赖默认值，尤其在position: fixed嵌套中 - 关闭状态要同时设：
opacity: 0; visibility: hidden; pointer-events: none; - 开启状态对应开回：
opacity: 1; visibility: visible; pointer-events: auto; - 别在
@media或:hover里动态改pointer-events——移动端无 hover，媒体查询也不触发重绘
为什么动画一卡一卡？opacity 搭配错属性触发重排
opacity 本身走 GPU 合成，很轻量；但一旦和 top、left、height 这类会触发布局的属性一起动画，就会在 iOS Safari 下明显掉帧。
- 位移统一用
transform: translateY()，别用top: -100% - 展开/收起时，优先用
transform+opacity，避免改height或max-height - 如果菜单内有滚动，
opacity不影响overflow-y: auto，但display: none会让滚动位置丢失 - 加过渡时写：
transition: opacity 0.3s ease, transform 0.3s ease，别漏掉transform
为什么移动端菜单微露一条边？用 -100vw 替代 -100%
-100% 是相对于父容器宽度计算的，而父容器可能有 padding 或 border，导致偏移量不足，菜单右边露出像素级缝隙。视口单位更可靠。
立即学习“前端免费学习笔记（深入）”；
- 全屏菜单初始隐藏写：
right: -100vw;，不是-100% - 桌面端固定宽度滑出（如 350px），就用
right: -350px; - 配合
transition: right 0.3s ease实现滑入滑出，比纯 opacity 更有方向感 - 确保
.menu-overlay的width在移动端设为100vw，不是100%
为什么关掉菜单后页面不能滚动？body 的 overflow 没恢复
全屏菜单常靠 body { overflow: hidden } 防止背景滚动，但 JS 关闭菜单时若忘了还原，整个页面就卡死了。iOS 尤其敏感。
- 打开菜单时：
document.body.style.overflow = 'hidden'; - 关闭菜单时：
document.body.style.overflow = '';（注意不是'auto'） - 如果用了
position: fixed遮罩层，加上touch-action: none防止安卓误触发底层滚动 - 别在点击事件里直接
event.preventDefault()——它会干掉按钮本身的 focus 状态，影响可访问性
最易被忽略的是：所有动画属性必须写在同一个元素上，且 transition 要覆盖所有参与变化的属性；visibility 切换必须配 step-end，否则中间态会闪一下。这些细节不处理，再漂亮的动效也会在真机上崩。
