CSS transition 多次触发易导致动画卡顿或跳变，根本原因是浏览器不自动取消进行中的过渡；需监听 transitionend 事件并清理，结合强制重排与 requestAnimationFrame 实现安全过渡。
当 CSS transition 动画被快速触发多次（比如连续 hover、频繁点击或状态切换），常出现动画“卡住”“跳变”或“未完成就重绘”的问题。根本原因在于：浏览器不会自动取消正在进行的过渡，新样式会立即覆盖旧样式，导致过渡中断、时间错乱或视觉异常。解决核心是——主动监听并清理。
监听 transitionend 事件，精准捕获动画结束
每个可过渡的属性都会触发 transitionend，但要注意它不冒泡，且可能因属性名差异（如 background-color → backgroundColor）或浏览器前缀产生兼容性问题。
- 用
el.addEventListener('transitionend', handler)绑定，避免重复监听（建议配合once: true或手动removeEventListener） - 在回调中检查
event.propertyName，只响应你关心的属性（例如只处理'transform'，忽略'opacity'） - 注意：如果过渡被强制中断（如 class 立即移除），
transitionend可能不会触发 —— 这正是需要“兜底处理”的场景
中断时主动清除过渡状态，避免残留影响
在新动画开始前，先“重置”元素的过渡相关样式，防止旧过渡干扰：
- 临时移除
transition样式（如el.style.transition = 'none'），强制跳过过渡，再同步设置目标值 - 下一帧（
requestAnimationFrame）恢复transition，再设回带过渡的样式 - 也可用
getComputedStyle(el).transform等读取当前值，做平滑衔接（适合自定义缓动逻辑）
用 class 切换 + JavaScript 控制，兼顾语义与可控性
纯 CSS class 切换简洁，但缺乏对中间状态的掌控。推荐组合方案：
立即学习“前端免费学习笔记（深入）”；
- 定义基础类（如
.is-moving）控制是否启用过渡 - 用 JS 在合适时机添加/移除该类，并在
transitionend中清理状态或触发后续逻辑 - 若需取消进行中的动画，可先
el.classList.remove('is-moving')，再el.offsetHeight强制重排（触发重绘），最后重新添加类
封装一个安全的过渡工具函数
把常见模式收拢，减少重复判断：
function safeTransition(el, styles, duration = 300) {
// 清除旧过渡
el.style.transition = 'none';
el.offsetHeight; // 强制重排，确保样式重置生效
// 应用目标样式（无过渡）
Object.assign(el.style, styles);
// 下一帧启用过渡并再次设样式（触发新过渡）
requestAnimationFrame(() => {
el.style.transition = `all ${duration}ms ease`;
Object.assign(el.style, styles);
});
}
调用时传入 DOM 元素和目标样式对象，内部自动处理中断与重启，适用于按钮反馈、菜单展开等高频交互场景。
