禁用按钮上transition不生效，主因是pointer-events: none干扰状态计算或浏览器对:disabled过渡支持不稳定；应优先用disabled属性配合opacity等可动画属性，或改用class控制并同步aria-disabled。
禁用按钮上transition不生效？先看pointer-events有没有干扰
过渡动画在disabled状态失效，往往不是transition写错了，而是元素被pointer-events: none“静音”了——它不仅拦点击，还会让浏览器跳过伪类状态计算（比如:hover、:active），连带影响基于状态的过渡触发。
常见错误现象：button:disabled { opacity: 0.5; transition: opacity 0.3s; }写了但没动画；或者加了pointer-events: none后，鼠标移入时:hover过渡直接消失。
-
pointer-events: none会让元素完全脱离交互状态链，:hover/:active不会匹配，自然无法触发动画 - 真正想禁用交互又保留视觉反馈，优先用
disabled属性 +opacity/filter等纯视觉样式，别碰pointer-events - 若必须用
pointer-events: none（比如覆盖层拦截），动画得靠JS手动控制类名，不能依赖伪类
transition在:disabled伪类里能用，但有兼容性陷阱
:disabled是合法伪类，CSS里写button:disabled { transition: background-color 0.2s; }语法没问题，但实际效果取决于浏览器是否在状态切换时重绘该属性——某些老版本Safari和Firefox对:disabled的过渡支持不稳定。
使用场景：表单控件禁用态需要渐变淡出，或切换禁用/启用时有平滑颜色过渡。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge 90+、Firefox 100+ 支持良好；Safari 15.4+ 开始稳定支持
:disabled上的transition -
background-color、opacity、transform这类可动画属性最稳妥；display、visibility不能过渡 - 别依赖
transition来“掩盖”禁用逻辑——状态变更必须由JS真实设置disabled属性，否则CSS伪类不会响应
用class代替:disabled更可控
直接操作disabled属性虽语义正确，但CSS无法监听其变化做过渡；而class可以配合transition精准控制入场/离场动画，也绕开了pointer-events干扰问题。
实操建议：把禁用逻辑从属性移到类名，比如用.is-disabled替代原生disabled，再用JS同步控制可访问性属性（aria-disabled="true"）和键盘焦点。
- HTML里保持
<button class="btn is-disabled" aria-disabled="true">提交</button> - CSS写
.btn.is-disabled { opacity: 0.4; transition: opacity 0.25s ease-out; } - JS切换时用
el.classList.toggle('is-disabled')，同时更新aria-disabled和tabindex（必要时设为-1）
过渡卡顿或闪跳？检查will-change和重排
禁用态切换常伴随opacity或transform变化，如果动画不流畅，大概率是浏览器没开启硬件加速，或样式变更触发了意外重排。
性能影响：opacity和transform是合成层友好属性，但一旦混用height、margin等会触发布局的属性，过渡就会掉帧。
- 禁用态动画只用
opacity、transform、color等合成属性，避开width/height/top/left - 对频繁切换的元素加
will-change: opacity（仅限必要时），但别滥用，可能引发内存开销 - 用DevTools的“Rendering”面板勾选“Paint flashing”，确认禁用态切换是否触发了意外重绘
disabled属性？还是切class？抑或靠pointer-events硬拦？这三者行为完全不同，混着用就容易出现“写了transition却没反应”的情况。 
