按钮点击后动画卡顿或闪烁的常见原因是直接用display: none切换加载态，导致浏览器重排重绘中断动画帧；应改用visibility: hidden+opacity: 0保留渲染流，配合will-change: opacity和仅过渡opacity与transform等合成属性。
按钮点击后动画卡顿或闪烁
常见原因是直接用 display: none 切换加载态，导致浏览器重排+重绘中断动画帧。CSS 动画依赖元素持续存在且不被强制移出渲染流。
- 改用
visibility: hidden+opacity: 0控制可见性，保留占位和动画上下文 - 给按钮加
will-change: opacity（仅在触发加载前设置），提示浏览器提前升层 - 避免在
transition中同时过渡width或height—— 这会触发 layout - 示例：加载中状态只动
opacity和transform: scale(0.98)，两者都是合成属性
多个按钮共用同一套加载逻辑时状态错乱
典型表现是点 A 按钮，B 按钮也显示 loading，或 loading 状态无法清除。根本原因是共享了同一个 DOM 节点引用或全局变量控制状态。
- 每个按钮必须有独立的 loading 状态标识，推荐用
data-loading="true"属性而非 class 切换 - JS 中通过
event.target获取当前按钮，再用closest('button')防止事件代理误捕 - 异步操作完成后，务必用
btn.removeAttribute('data-loading')清除状态，而不是靠 class 移除后靠 CSS 隐藏 - 若用框架（如 React），确保 loading 状态是 per-button 的局部 state，而非提升到父组件统一管理（除非真需要互斥）
移动端 Safari 上旋转动画掉帧
iOS 15+ 的 WebKit 对 @keyframes 中未声明 transform: rotate(0deg) 起始帧时，会降级为软件渲染，导致 spinner 卡顿。
- 所有旋转动画必须显式写满起止帧：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 禁用
animation-timing-function: steps()—— 它在 Safari 上对 transform 动画支持不稳定 - 用
transform: rotate(var(--rotate, 0deg))+transition: --rotate 0.2s linear替代 keyframes（需配合 JS 更新 CSS 变量），更可控 - 避免在
::after伪元素里画 spinner 并动画 —— iOS 对伪元素 transform 动画有额外开销
加载中按钮仍可被重复点击
这是交互缺陷，不是动画问题，但常被归类为“加载动画没起作用”。本质是点击态和 loading 态没有做阻断联动。
- 点击瞬间立即设
btn.disabled = true，同时设btn.setAttribute('data-loading', 'true') - 不要只靠 CSS 隐藏按钮或加 pointer-events: none —— 这无法阻止键盘回车触发
- 异步失败后，记得恢复
btn.disabled = false；成功后也要恢复，别只在 catch 里写 - 如果用了防抖（
debounce），注意它不能替代 disabled —— 防抖只影响 JS 执行时机，不阻止原生 click 事件冒泡和默认行为
最易被忽略的是：loading 状态变更和 DOM 更新必须在同一个宏任务内完成。跨 microtask（比如 Promise.then）更新 data-loading，可能让动画样式来不及响应，尤其在低端 Android 设备上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
