必须显式声明transform: rotate(0deg)、统一transform-origin: 50% 50%、禁用display控制显隐，改用visibility+opacity+max-height组合，三者未对齐会导致跳变、不同步或不转。
箭头不转、跳变、不同步——根本不是 transition 写错了，而是初始状态、显隐方式、旋转中心三者没对齐。
为什么 transform: rotate(180deg) 配合 :hover 会跳或闪
浏览器不会自动补全未声明的 transform 起始值。如果常态下没写 transform: rotate(0deg)，只在 :hover 里写 rotate(180deg)，动画就从“无变换”硬切过去，视觉上就是卡顿或偏移。
- 必须显式写
transform: rotate(0deg)在常态样式中（哪怕它看起来“多余”） - 别用
transition: all—— 它可能意外触发布局重排，干扰旋转 - 伪元素（如
::after）画的箭头，必须有content或明确宽高，否则transform可能被忽略
怎么让箭头稳稳绕中心翻转，不飞出去
默认 transform-origin 是 0 0（左上角），小尺寸箭头一旋转就位移。尤其用 border 画的三角或 inline 元素，抖动更明显。
- 统一设
transform-origin: 50% 50%（IE10–11 不支持center简写，必须写百分比） - 如果箭头是 SVG，给它加
display: block和固定width/height，否则 Safari 可能跳过transform - 避免用
will-change: transform常驻设置——移动端老 Safari 反而更容易卡顿，只在 hover/focus 激活前动态加
为什么箭头转了但菜单没动，或者反过来
常见于把箭头和菜单内容的 transition 时间、缓动函数、触发时机写得不一致。比如菜单用 max-height 0.3s ease，箭头用 transform 0.2s linear，必然不同步。
立即学习“前端免费学习笔记（深入）”；
- 两者必须共用同一套时序：推荐
0.25s cubic-bezier(0.4, 0, 0.2, 1)（Material Design 标准） - 显隐不能靠
display: none—— 它直接砍掉所有过渡。改用组合：visibility: hidden; opacity: 0; max-height: 0; - 展开时同步设：
visibility: visible; opacity: 1; max-height: 500px;（max-height值需大于真实内容高度） - 若内容高度不可预知，
max-height: 0 → auto浏览器不支持过渡，必须 JS 测量后设内联max-height
怎么避免多级菜单或 JS 切换时角度错乱
硬编码 rotate(0deg)/rotate(180deg) 在复杂场景下极易脱节：JS 切了类名但忘了同步角度，或父子菜单共用样式导致互相覆盖。
- 用 CSS 变量统一控制：
--arrow-rot: 0deg定义在父容器，展开态改为--arrow-rot: 180deg - 箭头元素只写：
transform: rotate(var(--arrow-rot)); transition: transform 0.25s ease; - JS 只需切换
data-expanded="true"或类名（如.is-open），不碰内联 style - 无障碍别漏：
aria-expanded必须和 CSS 状态严格同步，否则屏幕阅读器读不准
真正难的从来不是写出 rotate，而是让 DOM 状态、CSS 变量、可访问性属性、JS 生命周期四者咬合严丝合缝。一个箭头翻转，背后是显隐策略、渲染管线、焦点流、兼容性补丁的综合判断。稍有松动，用户看到的就是“闪一下”或“卡半拍”。
