汉堡按钮点击后未变叉号的常见原因是CSS动画未配全关键帧或未触发重绘；应避免display: none，改用visibility: hidden+opacity: 0；三条线需独立span、absolute定位；动画须基于transform，禁用margin/padding位移；需同步aria-expanded状态；JS应监听transitionend事件并加锁防重复触发；Safari需显式设transform-origin: 50% 50%、禁用rotateZ、补-webkit前缀；菜单展开应动态测量scrollHeight设max-height，且动画顺序须先汉堡后菜单。
汉堡按钮点击后没变叉号，只动了半截
常见原因是 CSS 动画只定义了 transform 或 opacity 的起始/结束状态，但没配全关键帧或没触发重绘。浏览器对 display: none 的元素不执行动画，所以别在动画过程中切 display；改用 visibility: hidden + opacity: 0 组合更安全。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保三条线用三个独立的
<span>，每条都设position: absolute和统一宽度/高度，避免父容器缩放干扰动画 - 动画必须基于
transform: rotate()和transform: translate()，别依赖 margin/padding 位移——这些属性触发布局重排，卡顿明显 - 给按钮加
aria-expanded="false"，并在 JS 切换时同步更新，否则屏幕阅读器无法感知状态变化
JavaScript 控制汉堡状态时，多次点击导致动画错乱
核心问题在于：CSS 动画未完成就再次触发 class 切换，旧动画被中断，新动画从当前中间态开始，视觉上“跳变”或“卡住”。这不是 JS 写错了，是没等动画结束就操作 DOM。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
transitionend事件（不是animationend），只在动画真正结束时才允许下一次状态切换 - 给汉堡按钮加一个临时禁用标记，比如
data-burger-lock="true"，JS 检查这个标记再决定是否响应点击 - 避免用
classList.toggle()直接切换动画 class；先移除再添加，并加 16ms 微延迟（setTimeout(..., 0)）让浏览器有机会 flush 样式
移动端 Safari 上叉号旋转方向反了或不动
Safari 对 transform-origin 的解析和 Chrome 不一致，尤其当父容器有 transform: translateZ(0) 或 will-change: transform 时，会干扰子元素的旋转中心。另外，iOS 15+ 对 rotateZ() 支持不稳定，得显式写成 rotate(45deg)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 三条线的
transform-origin必须统一设为center，且不能依赖 inherit —— 显式写死transform-origin: 50% 50% - 动画关键帧里，第一条线转
45deg，第二条线opacity: 0，第三条线转-45deg；别用rotateZ，Safari 会忽略 - 加一行
-webkit-transform: rotate(45deg)兼容旧版 Safari，现代版本其实已不需要，但留着不伤性能
动画结束后导航菜单没展开，或者展开但没高度过渡
菜单本身通常用 max-height 做展开收起，但 max-height: 0 → max-height: 500px 这种写法在内容高度动态时会出问题：如果真实内容撑不满 500px，动画会提前结束；如果超了，就突然截断。这不是汉堡按钮的问题，是菜单容器的过渡逻辑没跟上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别用固定
max-height值；改用 JS 测量菜单scrollHeight，然后设为内联样式style="max-height: 248px"，再加 transition - 动画 class 切换顺序很重要：先加
is-open触发汉堡动画，等transitionend后再给菜单加menu-open类——否则两个动画竞争渲染帧 - 菜单容器要设
overflow: hidden，否则内容可能在动画中途“撑破”边界
