transitionend 事件未触发最常见的原因是过渡未发生或被中断：如设 transition: none、属性值未变化、hover 状态缺少默认态 transition 声明；应确保样式真实变化、双向声明 transition、避免监听前移除类；推荐用 { once: true } 监听并校验 propertyname，中断时手动跳转终态，回调中改样式需先禁用 transition 防套娃；核心是 js 主动控制而非依赖事件。
transitionend 事件为什么没触发
最常见的原因是：过渡根本没发生，或者被强制中断后浏览器没派发事件。比如你用 element.style.transition = 'none' 临时禁用过渡，再改样式，这时候 transitionend 就不会触发——因为浏览器压根没启动过渡流程。同样，如果目标属性值和当前值完全一样（比如两次都设 transform: translateX(0)），也不会触发事件。
另一个隐蔽坑点是：你在 :hover 状态里写了 transition，但鼠标移开时只靠 CSS 自动反向过渡，却没在默认状态也声明同样的 transition 属性。这种情况下退出过渡可能被忽略或跳变，transitionend 自然不触发。
- 确保过渡真正发生：检查前后 computed style 中目标属性是否确实变化
- 两个状态（如默认态和 hover 态）都要声明相同的
transition，否则退出可能无事件 - 避免在事件监听前就移除类或重置样式，否则监听器来不及绑定
如何安全地监听 transitionend 并清理状态
直接写 element.addEventListener('transitionend', handler) 很容易漏掉多次触发或监听残留。比如元素连续快速 hover/leave，会绑上多个监听器；或者动画中途被 JS 强制中断，transitionend 永远不触发，handler 就永远卡着。
推荐用一次性的监听封装，核心是：加监听 → 执行动作 → 立即移除监听。不要依赖“一定触发”，而是把清理逻辑放在可控路径里。
- 用
once: true选项自动解绑：element.addEventListener('transitionend', handler, { once: true }) - handler 内部要校验
event.propertyName，避免监听到其他无关属性的过渡结束（比如你只关心transform，但opacity也在动） - 如果过渡可能被中断（比如用户快速移开鼠标），要在中断逻辑里同步执行 cleanup，别等
transitionend
transition 被 JS 强制中断后怎么补逻辑
当你调用 element.classList.remove('animate') 或设 style.transition = 'none' 来打断动画，transitionend 基本失效。这时后续逻辑不能依赖事件，得主动推进。
典型场景：按钮 hover 放大，用户点击后要立刻缩放回原始尺寸并高亮。如果只移除 hover 类，缩放动画还在跑，新点击样式就被卡住。必须手动“跳转”到终态。
- 先移除触发类（如
element.classList.remove('hover')） - 用
void element.offsetWidth强制重排，清空过渡队列 - 立即设置终态样式：
element.style.transform = 'scale(1)'，或添加新类并确保该类里有稳定声明的终态值 - 后续逻辑（如播放音效、更新状态）直接在这之后执行，不等事件
为什么 transitionend 里修改样式会再次触发过渡
在 transitionend 回调里直接改同一个属性（比如又设 transform），浏览器会把它当作新变化，重新走一遍过渡流程——结果就是动画“套娃”，越触发越慢，甚至死循环。
根本原因是：你没切断触发链。哪怕只是 element.style.transform = 'scale(1.1)'，只要它和当前声明的 transition 匹配，就会再启一次过渡。
- 在回调里改样式前，先临时禁用过渡：
element.style.transition = 'none' - 改完后再恢复：
element.style.transition = ''或原始值 - 更稳妥的做法：用 class 切换代替内联样式，把终态样式写死在 CSS 里，JS 只负责开关类
- 如果必须动态计算值，确保只改一次，且改的是非过渡属性（如
visibility）
transitionstart，也没有可靠方式判断“这次改动到底动没动”。所以关键逻辑永远要 fallback 到 JS 主动控制，别把流程命脉交给一个可能根本不来的事件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
