CSS图标旋转过渡实现箭头180度动画

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。

好了，本文到此结束，带大家了解了《CSS图标旋转过渡实现箭头180度动画》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！