正确做法是保留disabled功能防护但用CSS模拟视觉禁用：加loading类+pointer-events:none、opacity+grayscale过渡、::after旋转图标（仅用transform/opacity动画），并在form submit事件中统一控制状态，配合aria-busy和touch-action等移动端防护。
点击后按钮变灰禁用但没loading图标？
直接改 disabled 属性会让按钮失去样式控制权，浏览器默认灰化 + 失去所有 CSS 过渡效果，:hover 和 transition 全部失效。更糟的是，部分屏幕阅读器会跳过 disabled 元素，影响可访问性。
正确做法是：保留 disabled 的功能防护（防重复提交），但用 CSS 模拟“视觉禁用”+ 加载态。关键在两步：
- 给按钮加一个
loading类，用pointer-events: none阻止点击，而非依赖disabled - 用
opacity+filter: grayscale()控制视觉灰度，确保transition仍生效 - 配合伪元素或内联
svg实现旋转 loading 图标，避免额外 DOM 节点
用 ::after 画旋转圆圈但转得卡顿？
CSS 动画卡顿通常不是因为写法错，而是触发了重排（reflow）。常见坑：用 width/height 或 top/left 做动画，强制浏览器每帧计算布局。
安全写法只动合成属性（transform + opacity）：
立即学习“前端免费学习笔记（深入）”；
.btn.loading::after {
content: "";
display: block;
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
margin: 0 auto;
animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意：currentColor 继承按钮文字色，不用硬编码颜色；border-top-color: transparent 是实现“缺口圆圈”的最简方式。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
表单 submit 事件里怎么安全加 loading？
别在 onclick 里加 loading —— 表单可能通过回车、JS form.submit() 或无障碍操作触发，绕过按钮点击。
必须监听 form 的 submit 事件，并在事件处理中统一控制按钮状态：
const form = document.querySelector('form');
const submitBtn = form.querySelector('[type="submit"]');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交，等异步完成后再发
// 禁用交互 + 显示 loading
submitBtn.classList.add('loading');
submitBtn.setAttribute('aria-busy', 'true'); // 辅助技术可感知
fetch(form.action, {
method: form.method || 'POST',
body: new FormData(form)
})
.then(res => res.json())
.then(data => {
// 成功逻辑
})
.catch(err => {
// 错误逻辑
})
.finally(() => {
submitBtn.classList.remove('loading');
submitBtn.removeAttribute('aria-busy');
});
});
重点：aria-busy="true" 是给读屏软件的明确信号；finally 确保无论成功失败都恢复按钮状态。
移动端点透、长按复制、300ms 延迟全要防？
按钮加了 loading 后，如果用户快速连点或长按，可能触发点透（穿透到下层元素）或系统菜单。这不是动画问题，而是移动端交互基础配置缺失。
三件事必须做：
- 在按钮上加
touch-action: manipulation，禁用双击缩放和 300ms 延迟 - 加
-webkit-tap-highlight-color: transparent去掉 iOS 点击高亮 - 加
user-select: none防止长按唤出复制菜单（尤其 loading 中文字变化时）
这些不解决动画本身，但决定了 loading 状态下用户是否还能“正常操作页面”——很多人卡在这里，以为是动画 bug，其实是交互层没兜住。
