应使用@keyframes动画而非transition控制旋转，JS仅通过class切换触发预设的阻尼旋转动画（如0%→70%转至360°、100%保持），配合cubic-bezier(0.25, 0.46, 0.45, 0.94)实现减速缓停，并添加translateZ(0)强制GPU加速避免iOS掉帧。
下拉刷新图标旋转时如何避免生硬突变？
直接用 transform: rotate() 配合 transition 会卡顿、跳变，尤其在手指松开瞬间图标从“正在下拉”切到“释放刷新”状态时。根本原因是 CSS 过渡只对数值变化起作用，而下拉过程中 rotate 值常被 JS 动态设为非连续角度（比如 0→30→60→90→120），浏览器无法插值平滑过渡。
- 必须把旋转控制权交给 CSS 动画（
@keyframes），而非依赖transition切换静态值 - JS 只负责开关动画状态（例如添加/移除
is-pulling类），不直接写style.transform - 阻尼感靠动画曲线实现：用
cubic-bezier(0.25, 0.46, 0.45, 0.94)模拟物理减速回弹，比ease-out更自然
如何用 @keyframes 实现带阻尼的旋转收尾？
关键不是让图标一直转，而是“松手后自动转到目标角度并缓停”。典型场景是：下拉时图标顺时针转到 180°，松手后自动补足到 360° 并缓停，视觉上像有惯性回弹。
@keyframes refresh-rotate-damped {
0% { transform: rotate(0deg); }
70% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
- 动画总时长建议 400–600ms，太短没阻尼感，太长用户会误判加载状态
- 70% 处达到目标角度，最后 30% 保持不动但用缓动曲线收尾，制造“减速停稳”错觉
- 必须配合
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)，否则就是匀速转圈
JS 控制动画触发时为什么不能直接 element.style.animation？
手动拼接 animation 字符串容易覆盖已有动画属性（比如打断 loading 状态的脉冲动画），且无法复用 CSS 中定义的 timing function 和 fill-mode。
- 推荐方案：用 class 切换 +
animation-play-state控制启停 - 给图标元素预设基础样式：
.refresh-icon { animation: none; } - 松手时加类：
element.classList.add('rotate-to-refresh')，CSS 中定义该类触发动画 - 动画结束后用
animationend事件清理 class，避免重复触发
移动端 Safari 下 transform: rotate() 动画掉帧怎么办？
iOS 15+ 之前，纯 transform 动画在某些机型上仍可能触发重排或降帧，尤其在页面有复杂滚动监听时。
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：
transform: rotate(0deg) translateZ(0)，哪怕translateZ(0)无实际位移 - 避免同时操作多个可动画属性（如边框、阴影），只动
transform和opacity - 检查是否意外触发了
will-change: transform且未清除——长期开启会持续占 GPU 内存
阻尼感的本质不是转得慢，而是加速度变化可感知；最易忽略的是动画结束后的静止帧必须和后续状态（比如 loading 图标）无缝衔接，否则用户会觉得“转完了但没反应”。
