最稳妥做法是点击后立即禁用按钮并添加loading类触发css动画，请求完成后（含成功、失败、中断）必须用js手动恢复按钮状态。关键在js控制状态流转，而非仅靠css；伪元素实现加载图标可避免布局抖动，且需注意兼容性与清理逻辑。
按钮点击后如何不卡住、又不重复提交
直接禁用按钮 + 显示 loading 状态是最稳妥的做法。光加动画不 disable button，用户狂点几次，请求照样发出去好几遍。Bootstrap 的 btn 类本身不带 loading 行为，得自己补逻辑。
关键不是“怎么动”，而是“什么时候动、动完怎么收”。CSS 动画只负责视觉，JS 才管状态流转。
- 点击后立即
button.disabled = true并添加loading类 - 动画用
@keyframes定义旋转或脉冲，作用于伪元素或子元素（避免影响文字布局） - 请求完成（无论成功失败）必须手动移除
loading类、恢复disabled
用 ::after 伪元素实现不挤占文字的旋转加载图标
直接在按钮文字上叠加载动画容易导致文字偏移或重绘抖动。推荐用 ::after 在右端插入一个纯 CSS 绘制的小圆圈或 SVG 风格旋转体，宽度固定，不影响按钮内联流布局。
@keyframes btn-loading-rotate {
to { transform: rotate(360deg); }
}
.btn.loading::after {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
margin-left: 0.5rem;
animation: btn-loading-rotate 1s linear infinite;
}
注意：currentColor 会继承按钮文字色，暗色主题下自动变白；border-right-color: transparent 是经典“环形旋转”写法，比 background-image 更轻量。
为什么不能只靠 CSS :disabled + transition 模拟 loading
CSS 本身无法监听异步操作完成，:disabled 状态可以设，但你没法用纯 CSS 在 fetch 结束后自动切回 enabled —— 这是 JS 职责。常见错误是只写：
button:disabled { opacity: 0.7; }
button:disabled::after { /* … */ }
这样会导致：按钮点了就 disabled，但后续没 JS 清理，永远卡在 loading 态。更糟的是，如果用户刷新页面或网络异常，disabled 状态残留，按钮彻底失活。
- 务必把
button.disabled = false和classList.remove('loading')写进finally块里 - 别依赖
:disabled自动触发动画，它只是状态标记，动画要靠额外 class 控制 - 移动端要注意
pointer-events: none不如disabled可靠，部分安卓 WebView 对前者支持不一致
兼容 Bootstrap 5 的 class 冲突处理
Bootstrap 5 的 .btn 默认有 white-space: nowrap 和 overflow: visible，而某些 loading 动画（比如伸缩条）需要 overflow: hidden 配合 clip-path，一加就可能截断伪元素。解决方案很具体：
- 不要改
.btn原始样式，新建类如.btn-loading，用!important覆盖关键项（仅限overflow、padding-right等必要属性） - 如果用了
btn-sm或btn-lg，确保::after尺寸也响应式调整，比如用em单位而非固定px - IE11 不支持
currentcolor在伪元素中生效，若需兼容，改用var(--bs-primary)配合:rootCSS 变量降级
loading 动画最易被忽略的点，其实是“取消请求时的状态回收”——比如用户点了按钮，又快速切走页面，fetch 被 abort，这时候 JS 里的 finally 未必执行。真要健壮，得加 AbortController 监听和 cleanup 回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
