下拉箭头旋转不生效的核心原因是 display: none 阻断过渡及 transform-origin 默认偏移；应改用 visibility: hidden + opacity: 0 或 max-height: 0，设 transform-origin: 50% 50%，并统一动画时序与状态同步。
下拉箭头旋转不生效？检查 transform-origin 和 display 切换
直接用 transition: transform 0.2s 配合 transform: rotate(180deg) 很容易失效，核心原因是：元素在折叠状态可能被设为 display: none，而 display 变化无法触发 CSS 过渡；或者旋转中心点默认在左上角，导致视觉错位。
- 必须用
visibility: hidden+opacity: 0或max-height: 0替代display: none，才能让transform过渡起作用 -
transform-origin建议设为center（或50% 50%），否则小图标会偏移、抖动 - 如果用伪元素（如
::after）画箭头，确保它有明确宽高或content，否则transform可能无反应
用 CSS 变量控制旋转角度更灵活
硬编码 rotate(180deg) 在多级菜单或动态展开场景里难维护。用 CSS 自定义属性配合 :is() 或类名切换，能复用样式逻辑。
- 定义
--arrow-rotate: 0deg在父容器，展开时改为--arrow-rotate: 180deg - 箭头元素写成
transform: rotate(var(--arrow-rotate)); transition: transform 0.25s ease - 这样 JS 只需切类名（如
.is-open），无需操作内联 style，也方便主题切换
IE 和旧版 Safari 的 rotate 兼容问题
transform: rotate() 在 IE10+ 和 Safari 9+ 基本可用，但 IE10–11 不支持 transform-origin: center 的简写，需补全为 transform-origin: 50% 50%；Safari 有时对 inline-block 箭头元素的过渡有渲染延迟。
- 避免对
svg或img直接加transform，优先用background-image+background-position模拟旋转（兼容性更强） - 若必须用 SVG，给它加
display: block和固定尺寸，不然 Safari 可能忽略transform - 不要依赖
will-change: transform来“优化”，老版本 Safari 反而更容易卡顿
transition-delay 导致旋转和内容展开不同步
常见做法是给下拉内容加 transition: max-height 0.3s，箭头加 transition: transform 0.2s，结果常出现箭头转完了、内容才开始动，或者反过来——用户感知就是“不跟手”。
立即学习“前端免费学习笔记（深入）”；
- 两个动画应共用同一套 timing：统一用
0.25s cubic-bezier(0.4, 0, 0.2, 1)（和 Material Design 一致） - 如果内容高度不可预知，别用
max-height过渡，改用height: auto+overflow: hidden+ JS 测量真实高度再设 inlineheight - 箭头旋转建议比内容过渡快一点点（比如
0.2svs0.25s），人眼会觉得更“主动”
