点击菜单没反应的主因是 overflow: hidden 裁剪 transform 动画，或 transition 未写在默认状态；应移除祖先 overflow 隐藏、将 transition 置于 .nav-menu 默认样式中，并避免 display 切换。
点击菜单没反应？检查 transform 和 overflow 是否冲突
很多滑动菜单在移动端点开后内容不显示，或只闪一下就消失，本质是 transform: translateY() 动画被父容器的 overflow: hidden 截断了。尤其当菜单用 position: absolute 脱离文档流，又套在 overflow: hidden 的导航栏里时，滑入区域直接被裁掉。
- 确保菜单容器（比如
.nav-menu）的最近一个有overflow: hidden或overflow: clip的祖先元素被移除或改为overflow: visible - 如果必须保留
overflow: hidden（例如做圆角遮罩），改用max-height+transition替代transform，虽然动画略生硬但兼容性稳 - 用 Chrome DevTools 的“Rendering”面板勾选 “Paint flashing”，能快速定位是否因裁剪导致内容不可见
transition 写在 transform 上却不动？确认初始状态是否可触发重排
CSS 过渡要生效，得有“起始值 → 终止值”的变化过程。如果菜单默认是 transform: translateY(-100%)，但你只在 .nav-open .nav-menu 里写 transform: translateY(0)，而没给默认状态加 transition，动画就不会启动——浏览器认为“从无过渡属性到有”，跳过动画。
- 把
transition: transform 0.3s ease-in-out写在菜单的**默认状态选择器**上（如.nav-menu），而不是只写在激活类里 - 避免用
display: none ↔ block控制显隐：它会中断过渡链。改用visibility: hidden+opacity: 0+transform组合 - 如果用 JS 切换类，确保不是在
DOMContentLoaded前就操作 DOM，否则样式未加载完成，getComputedStyle可能读不到初始transform
移动端滑动卡顿？优先用 will-change 和 transform 触发 GPU 加速
纯靠 top/left 移动菜单会强制重排重绘，低端安卓机明显掉帧。必须让浏览器知道“这个元素要动”，提前分配图层。
- 在菜单元素上加
style="will-change: transform;"（注意：仅对频繁动画元素用，别滥用） - 确保
transform值是translateY()、translateX()或scale()等可合成属性，避开width、height、margin - 如果用
@keyframes做复杂滑入，记得加animation-fill-mode: forwards，否则动画结束瞬间会回弹到初始状态
JS 控制开关时，classList.toggle() 没生效？检查事件绑定时机和冒泡干扰
点击汉堡图标没反应，常见原因是按钮被包裹在多个 div 里，事件被上层拦截；或者 JS 执行太早，DOM 还没渲染完。
立即学习“前端免费学习笔记（深入）”；
- 用
event.stopPropagation()防止点击穿透到父级click监听器（比如整个导航栏有全局关闭逻辑） - 不要只依赖
document.querySelector('.hamburger').addEventListener('click', ...)，先判空：if (hamburger) { ... } - 如果菜单是动态插入（如通过
innerHTML注入），需在插入后手动绑定事件，或用事件委托：document.addEventListener('click', e => { if (e.target.matches('.hamburger')) { ... } })
overflow: hidden 裁剪和 transition 位置写错这两处，调的时候先盯死这两个地方。 
