CSS旋转动画失效主因是transform-origin未设对或transition未指定transform属性；需设transform-origin: center并显式声明transition: transform 0.2s ease-in-out，确保元素有明确宽高且SVG viewBox匹配。
transition 旋转动画失效：transform-origin 没设对
CSS 旋转动画不触发或转歪了，大概率是 transform-origin 默认值在捣鬼。它默认是 50% 50%（中心点），但箭头图标通常窄长，绕中心转 180° 看着像位移、抖动，而不是干净的翻转。
- 展开/折叠箭头建议统一设为
transform-origin: center;（等价于50% 50%），但必须和transform同时存在，否则过渡无效 - 如果图标用
<svg></svg>或<i></i>，确保其盒模型有明确宽高（比如display: inline-block; width: 16px; height: 16px;），否则center可能算不准 - 别用
left top这类关键字——浏览器解析不一致，老版本 Safari 会直接忽略
rotate(180deg) 不过渡：transition 属性漏写了 transform
transition 不会自动监听所有变形，必须显式声明要过渡的属性。只写 transition: all 0.2s; 很危险：它可能过渡颜色、透明度甚至 margin，但多数浏览器对 all 中的 transform 支持不稳定，尤其在 flex/grid 容器里。
- 务必写成
transition: transform 0.2s ease-in-out; - 不要用
ease—— 它在旋转起始/结束处速度突变，箭头“咔”一下弹开；ease-in-out更顺滑 - 如果同时改颜色或 opacity，分开写：
transition: transform 0.2s, color 0.2s;，避免all引发意外重绘
JavaScript 切换 class 后动画不触发：class 切换太快或没触发重排
用 JS 控制 .is-open 类来驱动旋转时，如果在单次执行中反复增删 class（比如先 el.classList.remove('is-open') 再 el.classList.add('is-open')），浏览器可能合并操作，跳过中间状态，导致 transition 失效。
- 确保 class 切换前后有可感知的状态差：展开态加
transform: rotate(180deg);，收起态用transform: rotate(0deg);，别省略0deg - 避免在同一个事件循环里连续修改 class —— 如果必须，插一句
el.offsetHeight;强制重排（虽然不优雅但有效） - 更稳的做法是用
getComputedStyle(el).transform检查当前状态，再决定加哪个 class，而不是靠 JS 维护开关变量
SVG 箭头旋转偏移：viewBox 和 CSS 宽高不匹配
SVG 图标如果没设 viewBox，或 width/height 和 viewBox 比例不一致，transform-origin: center 就会算错中心点，旋转时看起来像平移或缩放。
立即学习“前端免费学习笔记（深入）”；
- 检查 SVG 标签是否含
viewBox="0 0 24 24"（数值按实际图标定），且 CSS 中设了等比宽高，比如width: 16px; height: 16px; - 别用
width: 100%套在未知容器里——父容器宽度波动会导致 viewBox 缩放失真 - 如果必须响应式，用
aspect-ratio: 1;配合width: 1em;，比单纯设width更可靠
最常被忽略的是：rotate 动画依赖元素有确定的几何尺寸。空标签、未设置 display 的内联元素、或被 overflow: hidden 截断的父容器，都会让 transform-origin 失效。动效调不出来，先看 computed styles 里的 width/height 是不是 0。
