按钮也会说「完成了」
让用户知道操作已被接收、正在处理，还是已经完成。
互动实验在真实界面中看
正在准备互动实验…
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
正在准备互动实验…
完成后只更新了旁边的状态文本。
使用 Skills · 应用交互规则规则应用
正在准备互动实验…
结果也反馈到操作按钮本身，视线不必重新寻找。
01 / 改了什么
就近反馈、固定宽度、明确的处理状态。
02 / 为什么这样改
先把状态说明白，再用动效加强反馈。
03 / 什么时候不需要
输入、快捷键等高频操作不必每次都播放完整庆祝动画。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
先把状态说明白，再用动效加强反馈。
01按钮文案与图标一起变化，结果不只靠颜色表达。
02处理中保留按钮宽度，避免旁边内容跳动。
03成功由实际任务结果决定，不依赖动画结束事件。
适合用在保存设置提交表单加入收藏
把这段需求，交给你的 AI
为保存按钮设计空闲、处理中、成功和失败状态。立即响应点击；处理中防止重复提交且保留布局宽度；结果以文字与图标明确表达。失败能重试。减少动态效果时保留状态文字。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
.save { min-width: 128px; transition: transform 150ms ease-out; }
.save:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
.save:active:not(:disabled) { transform: none; }
}
// 保存结果由业务 Promise 更新，不依赖 animationend。原理、来源与适用边界 ＋
输入、快捷键等高频操作不必每次都播放完整庆祝动画。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。