用::before和::after配合div本体画三条线，通过background-color、height、top定位，用transform:translatey()移动上下线，transform:rotate()旋转中线，所有变换基于transform-origin:center，transition明确指定transform和opacity属性以确保动画流畅。
怎么用伪元素画三条线并控制旋转
核心是用 ::before 和 ::after 配合 div 本体，三段线全靠 background-color + height + top 定位。别用三个 span，那样 DOM 膨胀、动画难同步。
- 默认状态：三线等宽等高，垂直居中，间距固定（比如
0.5em） - 用
transform: translateY()移动上下两条线，transform: rotate()转中间那条——所有变换必须基于transform-origin: center，否则旋转偏移 - 过渡必须写在基元素上（比如
.hamburger），不能只写在伪元素里，否则初始态无过渡 - 注意：
transition要明确列出属性，比如transition: transform 0.3s ease, opacity 0.2s；别用all，会意外触发重排
为什么点击后图标不转或转错方向
常见原因是类名切换时机和 CSS 优先级打架，或者 transform 堆叠覆盖。旋转动画本质是两组 transform 值切换，不是“加旋转”，而是“替换成带旋转的新值”。
- 确保激活态的 class（如
.is-active）比默认样式权重高，必要时加!important（仅限transform和opacity） - 上下线用
translateY+rotate组合时，顺序很重要：rotate(45deg) translateY(-0.5em)和translateY(-0.5em) rotate(45deg)效果完全不同——推荐统一用rotate在前 - 中间线要转 90° 变成横线，但别直接写
rotate(90deg)，应写rotate(90deg) scale(0)或配合opacity: 0消失，否则视觉突兀 - JS 切换 class 必须等 DOM 更新后再触发动画，避免同步操作导致浏览器跳过过渡（Vue/React 中注意 nextTick 或 useEffect 依赖）
移动端点击没反应或动画卡顿怎么办
本质是合成层缺失或强制重排。CSS 动画性能敏感点不在“写得多”，而在“动得巧”。
- 给汉堡容器加
will-change: transform（仅在 hover/active 时加，避免常驻） - 所有动画属性限定在
transform和opacity，禁用top/left/width等触发布局的属性 - 真机测试时，iOS Safari 对
transform: rotateZ()支持更稳，建议显式写rotateZ(45deg)而非rotate(45deg) - 如果用
pointer-events: none关闭非激活态交互，记得在.is-active里重开，否则关不掉菜单
如何让三线动画和菜单展开同步
图标和菜单内容（比如 .nav-list）是两个独立动画，强行用同一 class 控制容易错拍。推荐解耦：图标动画走 CSS，菜单显隐走 JS 控制 max-height 或 visibility + opacity。
- 图标动画完成时间设为
0.3s，菜单过渡设为0.35s，留出 50ms 缓冲，肉眼更顺 - 不要用
display: none切菜单，会导致图标动画结束后菜单突然闪出；改用visibility: hidden+opacity: 0+max-height: 0 - 若菜单高度不固定，用 JS 测量
scrollHeight后再设max-height，避免 CSS 无法推算导致过渡失效 - 动画结束回调别依赖
transitionend，iOS 上可能漏发；改用setTimeout延迟 350ms 执行后续逻辑更可靠
transform-origin: center，哪怕看起来“应该一样”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
