直接用disabled属性加旋转动画会失效，因浏览器禁止在disabled元素上执行transition和animation、:hover及伪元素不触发、读屏器跳过；正确方案是用loading class配合pointer-events: none与aria-busy实现视觉与交互解耦。
直接用 disabled 属性加旋转动画，99% 会失效——按钮变灰、动画卡住、屏幕阅读器跳过、:hover 失灵。真正可用的方案是：用 loading class 控制视觉态，靠 pointer-events: none + aria-busy 实现防护与反馈解耦。
为什么不能直接设 button.disabled = true
浏览器对 disabled 元素有硬性限制：
-
transition和animation全部被忽略（尤其 iOS Safari） -
:hover、::after伪元素不触发（Firefox 最明显） - 部分读屏器直接跳过该按钮，用户不知道“还在处理中”
- 焦点丢失，键盘操作流中断
这不是 CSS 写得不够好，是浏览器规范本身禁止在 disabled 元素上做动画。
用 loading class 替代 disabled 的实操写法
保留按钮可交互性，只禁用点击行为，同时让动画照常运行：
立即学习“前端免费学习笔记（深入）”；
HTML 中：<button type="button" class="btn" aria-busy="false">提交</button>
JS 点击时：btnEl.classList.add('loading');btnEl.setAttribute('aria-busy', 'true');btnEl.setAttribute('aria-disabled', 'true');
CSS 中：.btn.loading { pointer-events: none; opacity: 0.7; }.btn.loading::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border: 2px solid #999; border-top-color: #007bff; border-radius: 50%; animation: spin 0.8s linear infinite; will-change: transform; }
关键点：
• pointer-events: none 比 disabled 更轻量，不干扰样式和可访问性属性
• aria-busy="true" 和 aria-disabled="true" 必须同时设置，否则读屏器识别不一致
• 伪元素动画只用 transform 和 opacity，避免 top/left 触发重排
JS 控制 loading 状态的三个必守时机
loading 不是“点下去就转”，而是一套必须闭环的状态机：
- 点击事件第一行立即加
loading类、设aria-busy="true" - fetch 或 axios 调用前就执行，不是等
.then()才开始 - 无论成功或失败，都必须在
finally块里移除 class、还原aria-busy="false"
漏掉 finally，loader 就永远卡住；只在 success 里恢复，失败后按钮就废了。
旋转动画卡顿或不转？检查这几个地方
常见问题不是代码没写对，而是触发了浏览器渲染陷阱：
- 伪元素用了
content: ""+display: block→ 改成display: inline-block或用transform: scale(0)隐藏 - 动画用了
width/height或margin→ 全部换成transform: rotate()+opacity - 没加
will-change: transform→ 现代浏览器仍建议保留，尤其移动端 - 动画时长低于 0.6s → 视觉上像抽搐，建议设为
0.8s～1.2s
最易被忽略的是：动画必须绑定在伪元素或内联 SVG 上，而不是整个按钮——否则旋转会带动文字一起转，破坏布局。
