用 opacity + transition 实现按钮渐变禁用效果，禁用时设 opacity: 0.5 并配合 0.2s ease-in-out 过渡，同步调整 color、background-color 和 cursor: not-allowed；需确保 disabled 属性或 aria-disabled="true" 与 pointer-events: none 协同，兼顾可访问性与交互可靠性。
按钮禁用启用时直接显示/隐藏或瞬间变灰，视觉上确实生硬。用 opacity 配合 transition 是个简单有效的弱化方案，关键在于控制透明度变化节奏，同时兼顾可访问性和交互反馈。
用 opacity + transition 实现渐变禁用效果
禁用时不要直接设 opacity: 0.4 然后无过渡，而是加上平滑过渡声明：
.btn {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
这样点击触发禁用（比如表单提交中）时，按钮会柔和淡出，启用时再淡入，观感更自然。
避免纯靠 opacity 丢失可读性
仅调低 opacity 可能导致文字在浅背景上辨识度下降。建议同步微调颜色和指针：
立即学习“前端免费学习笔记（深入）”；
- 禁用态用稍深的灰（如
color: #666），而非完全依赖透明度压暗 - 保留边框或背景色的轻微变化（如
background-color: #f5f5f5），增强层次感 - 务必设置
cursor: not-allowed，提供明确交互提示
配合 pointer-events 提升响应一致性
单纯靠 :disabled 有时不够（比如自定义按钮没原生 disabled 属性）。可手动加类控制：
.btn.is-disabled {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
pointer-events: none 能彻底阻止点击穿透，避免过渡期间用户误点——这点比只靠 opacity 更可靠。
注意可访问性不被弱化
渐变动效不能牺牲语义和屏幕阅读器支持：
- 始终使用真实的
disabled属性（<button disabled>），而非仅靠样式模拟 - 如果必须用 class 控制，记得同步设置
aria-disabled="true"和tabindex="-1" - 避免过渡时间过长（超过 0.3s 易被感知为卡顿），也别太短（低于 0.1s 几乎看不出效果）
不复杂但容易忽略：opacity 过渡只是视觉层优化，核心逻辑仍要靠状态管理来驱动启用/禁用时机。
