transitionend 事件是唯一可靠的过渡完成监听方式，但需避免 display:none、visibility:hidden、dom移除、样式未生效、不可过渡属性、内联样式覆盖等失效场景，并正确绑定、过滤属性、防止重复监听及处理中断重置。
transitionend 事件是唯一可靠的方式，但直接绑定容易出错——它会为每个过渡属性各触发一次，且可能根本不触发。
transitionend 事件为什么有时不触发
常见失效场景包括：元素被设为 display: none、visibility: hidden 或从 DOM 中移除；过渡开始前样式未生效（比如 class 刚加完就监听）；或目标属性根本不可过渡（如 auto 值参与 right 过渡）。更隐蔽的是：用 element.style.property = value 直接写内联样式，会覆盖 CSS 中定义的 transition，导致无过渡、无事件。
- 检查是否在设置新样式前读取过
getComputedStyle(el).propertyName—— 这会强制浏览器计算当前值，避免“跳过过渡” - 避免在动画中途调用
el.classList.remove()或el.style.display = 'none'，改用opacity: 0+pointer-events: none等兜底方案 - 若用
all作为transition-property，transitionend可能因多个属性变化而重复触发，务必用event.propertyName过滤
如何正确绑定 transitionend 并避免重复监听
不要反复 addEventListener('transitionend', handler)，尤其在频繁 toggle 的场景下（如抽屉菜单开关）。每次绑定都可能累积监听器，造成内存泄漏和多次回调。
- 优先使用
{ once: true }选项：el.addEventListener('transitionend', handler, { once: true }) - 若需复用 handler，手动
removeEventListener，注意函数引用必须一致（不能传匿名函数） - 兼容旧版 WebKit 需检测事件名：
const transEnd = 'ontransitionend' in document.body ? 'transitionend' : 'webkitTransitionEnd' - 只响应关心的属性：
if (e.propertyName !== 'transform' && e.propertyName !== 'opacity') return
transition 被中断时怎么安全重置状态
用户快速 hover / click 多次，常导致过渡“卡住”或视觉跳变。浏览器不会取消进行中的 transition，新样式直接覆盖，旧动画残留影响后续行为。
- 在新动画开始前，先临时禁用 transition：
el.style.transition = 'none'，再同步设置目标值（如el.style.transform = 'translateX(0)'） - 用
requestAnimationFrame在下一帧恢复 transition：requestAnimationFrame(() => { el.style.transition = 'transform 0.3s ease'; }) - 对抽屉类组件，更推荐统一用
transform替代left/right，因为transform总有明确初始值，不会出现auto → -300px插值失败
真正难的不是监听事件本身，而是处理 transitionend 不触发的“静默失败”——它不报错，只让你的回调永远等不到。所以每次写完监听逻辑，都要刻意模拟中断场景（比如快速连点两次）验证是否仍能进入回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
