多状态转换按钮需通过data-state属性标记状态（如idle/loading/success/error）、javascript控制流转、css属性选择器驱动样式，而非原生支持；须避免伪类局限，兼顾可访问性与异常处理。
多状态转换按钮不是靠 <button></button> 自身支持，而是靠组合 CSS 类、data-state 属性和 JavaScript 控制实现的——它没有原生“三态”语义，必须手动管理状态流转逻辑。
用 data-state 标记当前状态并驱动样式
把状态存在属性里，比用 class 列表判断更清晰、更易调试。浏览器不关心这个属性名，但你能一眼看出当前是 idle、loading 还是 success。
-
data-state值必须统一约定，比如只允许"idle"/"loading"/"success"/"error"，避免拼写不一致导致 JS 无法匹配 - CSS 中用属性选择器写样式，例如
[data-state="loading"]，而不是靠多个 class 切换，减少 class 名冲突风险 - 不要在 JS 中直接改
element.className = "..."，这会清空所有已有 class；改用classList.add()/remove()或直接设dataset.state = "xxx"
JavaScript 控制状态切换时的常见陷阱
状态不是线性推进的，用户可能连点、快速失败重试、或在 loading 中刷新页面——JS 必须能应对这些现实情况。
- 点击后立刻设
data-state="loading"，再发请求；否则用户可能重复点击触发多次请求 - 请求完成（无论成功或失败）后，必须重置为
idle或明确设为success/error；漏掉这步会导致按钮卡死在 loading 状态 - 禁用状态要用
disabled属性（对<button></button>）+pointer-events: none（对非 button 元素），光靠视觉灰化不可靠 - 如果按钮要支持键盘操作（如回车触发），需监听
keydown并过滤Enter和Space，且只在data-state="idle"时响应
CSS 中用 transition 实现平滑状态过渡
transition 不作用于所有 CSS 属性，只对可计算值（如 color、opacity、transform）生效；背景色渐变更依赖浏览器渲染策略，别指望 background-color 在不同色值间“匀速过渡”。
- 推荐用
transition: opacity 0.2s ease, transform 0.15s ease，这两个属性性能好、兼容性强 - 避免对
display做 transition（无效），改用visibility+opacity组合控制显隐动画 - 加载中状态常用旋转动画，用
@keyframes spin+animation: spin 1s linear infinite，注意加will-change: transform提升渲染性能 - 文字内容变化（如 “提交” → “提交中…” → “已提交”）无法靠 CSS 动画，必须由 JS 更新
textContent
为什么不能只靠 CSS :hover/:active 实现多状态
:hover 和 :active 是瞬时伪类，它们不保存状态，也无法表达“已成功”或“出错了”这类持久结果。
- :hover 只在鼠标悬停时生效，移开即失效；它不能替代
data-state="idle"这种可编程状态 - :active 只在鼠标按下瞬间触发，松开就消失，无法模拟 loading 的持续过程
- 移动端没有 hover 概念，纯伪类方案在触屏设备上基本失效
- 屏幕阅读器无法感知伪类变化，无障碍支持必须依赖真实 DOM 属性（如
aria-busy="true"、aria-live="polite"）
真正难的不是让按钮变色或动起来，而是让状态机逻辑与 UI 同步、在各种异常路径下不丢状态、且对键盘和读屏软件友好——这些细节一旦漏掉，多状态按钮就会变成“看起来酷，用起来崩”的典型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
