推荐用 transition 实现响应式菜单滑入滑出：通过 max-height、opacity 和 transform 组合动画，配合 .menu-open 类切换，避免 display/visibility 不可动画问题；禁用 pointer-events 防误触，优化 will-change 与渲染性能确保 60fps。
怎么用 @keyframes 给响应式菜单加滑入滑出效果
直接加 @keyframes 不行，因为菜单通常靠 display: none 或 visibility: hidden 控制显隐，而这两者都无法被 CSS 动画过渡。得先切到可动画的属性上——比如 max-height、opacity 和 transform。
推荐组合：max-height 控制展开收缩高度 + opacity 控制淡入淡出 + transform: translateY() 做轻微位移增强感知。三者一起用，比单靠 height 更可靠（避免要写具体像素值）。
-
max-height设一个“明显够用但不过大”的值，比如max-height: 500px；设为0时记得同时配overflow: hidden - 别用
height: 0 → height: auto，CSS 动画不支持auto，会直接跳变 - 动画触发必须依赖类名切换（如
.menu-open），不能靠伪类（:hover在移动端不可靠）
为什么 transition 比 @keyframes 更适合菜单开闭
菜单开闭是二元状态切换（开/关），不是循环播放或复杂路径动效。transition 更轻量、更可控，且天然响应类名变化，兼容性也更好（IE10+ 就支持）。
@keyframes 适合做加载指示器、悬停微动效这类“主动播放”的场景；菜单一旦用它，就得手动控制 animation-play-state 或 JS 触发 animationend，反而容易卡在中间帧。
立即学习“前端免费学习笔记（深入）”；
- 开菜单：给菜单容器加
transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in - 关菜单：同样属性，但起始态是展开值，结束态是
max-height: 0; opacity: 0 - 别忘了在关闭时加
pointer-events: none，防止动画未完成就点到隐藏项
移动端点击后菜单闪一下又消失？检查这三点
这是最常踩的坑，根本原因不是动画写错了，而是事件穿透或状态没同步。
- 汉堡按钮（
button.menu-toggle）如果用了preventDefault()不彻底，或者绑定在click而非touchstart，iOS 上会有 300ms 延迟导致误判 - 菜单容器没加
position: absolute或z-index，被其他元素遮挡，视觉上“消失”其实是被盖住了 - JS 切换类名后立刻又被其他逻辑覆盖（比如路由跳转、表单提交），导致
.menu-open类一闪而过
Chrome DevTools 里动画卡顿？优先看这个配置
不是代码问题，大概率是浏览器把菜单动画当成了“高成本合成层”，尤其在 transform 和 opacity 外还混了 border、box-shadow 或 filter。
- 打开 DevTools → Rendering 面板 → 勾选 “Paint flashing”，看菜单展开时是否大面积闪烁（说明频繁重绘）
- 把菜单容器加上
will-change: transform, opacity，但仅在开启动画前加，关闭后移除（避免长期占用 GPU 内存） - 避免在动画中读取
offsetHeight或getComputedStyle，会强制同步布局，打断动画帧
