正确实现箭头旋转动画需三要素：①常态设transform: rotate(0deg)并配transition；②统一transform-origin: 50% 50%防偏移；③用visibility/opacity/max-height替代display控制显隐，确保与菜单同步。
直接用 transform: rotate(180deg) 配合 :hover 很容易翻车——不是不转，就是跳、偏、闪、不同步。 根本原因在于浏览器对未声明初始状态的 transform 不缓存动画帧，且 display: none 或默认 transform-origin 会彻底阻断过渡效果。
必须显式写 transform: rotate(0deg) 才能触发平滑过渡
浏览器不会自动“补全”起始角度。如果只在 :hover 里写 transform: rotate(180deg)，而常态下没声明 transform，动画就会从“无变换”硬切到“180度”，造成视觉跳变。
- ✅ 正确写法：常态下就设
transform: rotate(0deg)，再加transition: transform 0.25s ease - ❌ 错误写法：
.arrow { } .arrow:hover { transform: rotate(180deg); }（缺初始值） - ⚠️ 注意：别用
transition: all，它可能意外触发布局重排或干扰其他transform（如scale）
用 transform-origin: 50% 50% 防止箭头偏移抖动
默认 transform-origin 是 0 0（左上角），小尺寸箭头（比如 border 画的三角）一旋转就飞出去。尤其在 inline-block 或伪元素中更明显。
- ✅ 统一设为
transform-origin: 50% 50%，让旋转围绕中心点 - ⚠️ IE10–11 不支持
center简写，必须写成50% 50% - 如果箭头是
::after伪元素，确保它有明确width/height或content，否则transform可能无效
别用 display: none 控制显隐，改用 visibility + opacity 或 max-height
display 切换是离散操作，无法参与 CSS 过渡。一旦菜单折叠时用了 display: none，哪怕箭头本身有 transition，也会瞬间消失，旋转动画直接被砍掉。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐组合：
visibility: hidden; opacity: 0; max-height: 0;（三者配合，避免占位/点击穿透问题） - ✅ 展开时同步设：
visibility: visible; opacity: 1; max-height: 500px;（max-height值需大于内容真实高度） - ⚠️ 如果内容高度不可预知，别依赖
max-height: 0 → auto，浏览器不支持auto过渡；得用 JS 测量后设内联max-height
用 CSS 变量统一控制旋转角度，比硬编码更可靠
多个下拉菜单共用一套样式时，硬写 rotate(180deg) 容易冲突；JS 切类名但忘了同步角度，也会导致状态错乱。
- ✅ 推荐方案：定义
--arrow-rot: 0deg，展开态用[data-expanded="true"] { --arrow-rot: 180deg; } - ✅ 箭头元素只写：
transform: rotate(var(--arrow-rot)); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); - ⚠️ IE 不支持 CSS 变量，如需兼容，退回
.is-open类切换方案，但逻辑要保持一致
真正难的不是让箭头转起来，而是让它和菜单内容的展开/收起节奏严丝合缝——稍有不同步，用户立刻觉得“卡”或“不跟手”。时间函数、transform-origin、显隐方式，三者必须咬合，少一个环节都容易露出破绽。
