菜单展开无动画需改用max-height过渡并设足够大固定值，配合opacity和transform实现自然动效；汉堡图标用checkbox+label纯CSS控制，三条线通过transform旋转隐藏；iOS需处理tap高亮、点击热区及pointer-events。
点击触发时菜单展开但无动画，检查 transition 是否作用于 height 或 max-height
直接对 height 做 transition 在从 0 到 auto 时会失效，浏览器无法计算中间帧。必须改用 max-height 并设一个足够大的固定值（比如 500px），让过渡可量化。
常见错误写法：height: 0; transition: height 0.3s; → 动画不执行
正确做法：
- 初始状态设
max-height: 0; overflow: hidden; - 展开状态设
max-height: 500px;（需大于菜单最大可能高度） - 同时确保子元素没有
display: none—— 它会阻断 transition，要用visibility或opacity配合
汉堡图标三条线旋转成叉号，用 transform 和 checkbox + label 模拟点击
纯 CSS 实现点击切换，推荐用隐藏的 <input type="checkbox"> + <label></label> 关联，避免 JS。图标用伪元素 ::before / ::after 构建三线，再通过 transform 控制旋转和位移。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 三条线统一用
div.burger span表示，高度、背景色、间距一致 - 未选中时：中间线
opacity: 1，上下线transform: translateY(±6px) - 选中后（
input:checked ~ .burger）：上线下翻 45°，下线上翻 45°，中间线opacity: 0 - 所有
transform和opacity都要加transition，否则无动画
菜单内容淡入+滑下，用 opacity + transform 组合过渡更自然
只靠 max-height 过渡会有“拉伸感”，用户感知生硬。建议叠加 opacity 和 transform: translateY() 来模拟真实动效。
实操建议：
- 菜单容器设
opacity: 0; transform: translateY(-10px);（初始不可见且上移） - 展开时设
opacity: 1; transform: translateY(0); - 两个属性都加
transition: opacity 0.3s ease, transform 0.3s ease; - 注意：若菜单内有链接，需确保
pointer-events: auto在展开后生效（初始可设pointer-events: none防误触）
在 iOS Safari 上点击无响应，检查 -webkit-tap-highlight-color 和 click 区域
移动端 Safari 对非可点击元素（如 div）的 tap 事件支持弱，且默认高亮色可能干扰视觉反馈。
必须处理的几项：
- 给触发按钮（
label或button）加-webkit-tap-highlight-color: transparent; - 确保标签有明确的
cursor: pointer和足够点击热区（最小 44×44px） - 避免用
onclick写内联 JS，优先用label[for]关联 checkbox - 如果用了伪元素做图标，记得加
pointer-events: none到伪元素上，防止遮挡底层点击
动画本身没问题，但交互链断裂就会“点不动”——这比动效逻辑更容易被忽略。
