根本原因是transition作用于多个属性导致队列堆积，应显式指定transition-property、配合will-change优化，并统一伪类过渡声明，JS操作时用强制重排清空队列。
多次触发 CSS 过渡动画导致效果叠加（比如连续 hover 出现卡顿、闪动、延迟或过渡未重置），根本原因常是 transition 作用在了多个属性上，而其中某些属性（如 color、opacity、transform）频繁变化，触发了过渡队列堆积。
用 transition-property 锁定要动的属性
避免写 transition: all 0.3s ease; 或 transition: 0.3s; —— 它们会让所有可动画属性都响应变化，极易叠加。应显式指定只对真正需要过渡的属性生效：
-
transition: transform 0.3s ease;→ 只过渡位移/缩放/旋转 -
transition: opacity 0.2s linear;→ 只过渡透明度 -
transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);→ 只过渡背景色
配合 will-change 提前提示（可选但推荐）
对高频触发的过渡属性（尤其是 transform 和 opacity），在元素上加 will-change: transform; 或 will-change: opacity;，能让浏览器提前优化渲染层，减少重复合成和过渡中断。注意：不要滥用，仅用于明确会频繁变化的属性，且建议在 JS 触发前动态添加/移除，避免长期占用资源。
避免状态冲突：hover / active / focus 多重覆盖
当多个伪类同时定义了不同 transition，浏览器可能合并或覆盖规则，造成行为不可控。统一收口到一个声明中：
立即学习“前端免费学习笔记（深入）”；
- ❌ 分开写：
a { transition: color 0.2s; }
a:hover { color: blue; }
a:active { transition: transform 0.1s; transform: scale(0.95); } - ✅ 合并写：
a { transition: color 0.2s, transform 0.1s; }
a:hover { color: blue; }
a:active { transform: scale(0.95); }
这样所有过渡都由同一套规则管理，不会因状态切换丢失过渡上下文。
JS 主动控制时重置过渡（进阶技巧）
若用 JS 动态修改样式（如 class 切换、内联 style），过渡可能因样式计算时机问题卡住。可在修改前强制触发重排，清空过渡队列：
- 先读取一个布局属性（如
offsetHeight），迫使浏览器同步计算当前样式 - 再修改目标样式或 class
- 例如：
el.classList.remove('active');
void el.offsetHeight; // 强制重排
el.classList.add('active');
