disabled状态下transition不生效的根源是浏览器对disabled属性变更直接重绘，跳过过渡流程；必须用class（如.is-disabled）配合requestanimationframe同步控制样式与disabled属性，才能实现平滑过渡。
disabled 状态下 transition 不生效的根源
直接给 button:disabled 写 transition 没用，因为浏览器不触发 disabled 状态的 CSS 属性变化——它不是“状态切换”，而是 DOM 属性变更后立即重绘，跳过了过渡流程。真正要动的是 :not(:disabled) 和 :disabled 之间的样式差值，且必须确保过渡属性本身在两种状态下都存在、可插值（比如 color、background-color、opacity）。
必须用 class 控制过渡起点和终点
靠纯 :disabled 伪类无法触发 transition，得把状态映射到一个可动画的 class 上。常见做法是：JS 同步设置 disabled 属性 + 切换 .is-disabled 类，再对这个类写过渡规则。
-
button默认不设transition，只在button:not(.is-disabled)和button.is-disabled中分别定义可过渡属性 - 过渡属性必须一致且支持插值，例如
background-color和color，避免用display或visibility - 禁用时不要仅靠
opacity: 0.5，它仍可点击；要配合pointer-events: none和真实disabled属性保语义
button {
background-color: #007bff;
color: white;
transition: background-color 0.2s ease, color 0.2s ease;
}
button.is-disabled {
background-color: #6c757d;
color: #adb5bd;
pointer-events: none;
}
JS 同步更新 class 和 disabled 属性的关键顺序
如果先改 disabled 再加 class，浏览器可能跳过过渡；如果先加 class 再改 disabled，按钮会短暂可点（尤其快速连点时）。稳妥做法是：用 setTimeout 或 requestAnimationFrame 微调时机，确保 class 生效后再设 disabled。
- 推荐用
requestAnimationFrame：它在下一次重绘前执行，能保证 class 已应用、样式已计算，再设disabled就不会打断过渡 - 别用
setTimeout(fn, 0)，它不保证与渲染周期对齐，偶尔会失效 - 示例逻辑：
btn.classList.add('is-disabled'); requestAnimationFrame(() => { btn.disabled = true; });
IE / Safari 旧版对 :disabled 过渡的兼容性陷阱
IE 完全不支持 :disabled 的 transition；Safari ≤15.4 对 background-color 在 :disabled 下的过渡有渲染 bug（颜色突变）。所以不能依赖伪类过渡，class 方案既是功能解法，也是兼容性兜底。
立即学习“前端免费学习笔记（深入）”；
- 如果你项目还要支持 IE，class 是唯一可行路径
- Safari 用户若看到灰色闪一下再过渡，大概率是没加
requestAnimationFrame延迟disabled设置 - 测试时务必在真机 Safari（尤其是 iOS 15.x）上点按观察，模拟器有时不复现
:disabled 这个伪类的渲染盲区——它看起来是个状态，实际是个硬切口。 
