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 自然不触发。
- 确保前后
getComputedStyle()中目标属性确实变化 - 两个状态（如默认态和 hover 态）都要声明相同的
transition，否则退出可能无事件 - 避免在事件监听前就移除类或重置样式，否则监听器来不及绑定
JS 主动取消动画时如何补回调
用 el.classList.remove('animating') 或 el.style.transition = 'none' 中断过渡后，浏览器不会补发 transitionend。这时不能干等，得手动收尾：
- 先清除类或禁用 transition
- 立即读取一个 layout 触发属性，如
void el.offsetWidth，强制浏览器同步计算当前样式 - 再同步设置终态样式（如
el.style.opacity = '0'），并调用你的完成逻辑 - 若需复用，把这三步封装成函数，例如
forceTransitionEnd(el, { opacity: 0 })
注意：回调中再改样式要先关掉 transition，否则可能触发新过渡，造成套娃。
transition 写在哪才保证始终有效
transition 必须写在元素的默认样式里，而不是只放在 .active 或 :hover 中。否则第一次变化时规则还没被识别，就直接跳到新值；更糟的是，移除状态类后 transition 声明消失，后续任何变化都失去上下文。
- ✅ 正确：
.box { opacity: 0; transition: opacity 0.3s ease; }+.box.active { opacity: 1; } - ❌ 错误：
.box { opacity: 0; }+.box.active { opacity: 1; transition: opacity 0.3s ease; } - 基础类必须永不被 JS 移除；状态类只管属性值，不管过渡能力
- UnoCSS/Windi 用户注意：
transition-opacity和duration-300必须同时存在，否则生成的 CSS 里transition字段为空
为什么强制重排（offsetWidth）能“修复”中断问题
它不是修复，而是重建过渡起点。浏览器需要两个独立渲染帧：第一帧记下旧值，第二帧应用新值。中断后旧帧已失效，offsetWidth 强制同步读取当前布局，让浏览器重新拍下“起始快照”，后续改样式才能构成可插值的变化链。
- 仅对可插值属性生效（
opacity、transform可以，display、height: auto不行） - 不要在循环里反复调用，单次动画一次就够了，否则引发 layout thrashing
- 别用
setTimeout(..., 0)模拟下一帧——它不保证渲染时机，高负载下可能失效 -
requestAnimationFrame更稳妥的写法：el.classList.remove('hidden'); requestAnimationFrame(() => el.classList.add('show'));，但里面别读getComputedStyle
transitionend 等浏览器“通知”，JS 要主动控制起始、中断、终态三阶段。尤其在复杂交互中，事件丢失是常态，不是异常。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
