transitionend事件需精准监听单个属性并处理兼容性与时序问题：检查event.propertyName、兼容webkit前缀、用setTimeout(0)确保重触发，避免属性未变、多属性干扰或JS中断导致失效。
transitionend 事件确实能监听 CSS transition 结束，但直接绑定回调常“没反应”或“触发多次”，根本原因不是事件没发生，而是你没处理好属性粒度、浏览器前缀和渲染时序。
为什么transitionend有时不触发
常见于三种情况：
- 过渡目标属性实际没变（比如
transform: translateX(0)→ 再设一次translateX(0)），浏览器跳过整个过渡流程，自然不发事件 - 用
transition: all却只改了一个属性，其余未变属性仍会触发transitionend（例如同时声明了color和opacity，但只动了opacity） - 过渡被 JS 中断：比如在动画中途调用
element.classList.remove("active")，旧过渡未完成就被覆盖，transitionend就不会触发 —— 这时得靠兜底逻辑，不能只等事件
怎么正确监听单个属性的结束
避免被无关属性干扰，必须在回调里检查 event.propertyName：
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'transform') {
console.log('平移/旋转已完成');
// 执行你的逻辑
}
});
注意：propertyName 是驼峰命名（如 backgroundColor），不是 CSS 中的短横线写法（background-color）。另外，不要依赖 e.target 做判断——它可能指向伪元素或子节点，稳妥做法是绑定在明确的目标元素上。
立即学习“前端免费学习笔记（深入）”；
如何兼容老版本 Safari 和旧 Android 浏览器
WebKit 内核曾要求带前缀，现在虽已基本支持标准事件，但仍有少量设备需兼容：
- 监听时同时注册
transitionend和webkitTransitionEnd - 不要用
once: true，因为一次过渡可能因多属性触发多次事件，once会导致后续属性变更漏掉回调 - 更稳妥的方式是自行检测：
function getTransitionEvent() {
const el = document.createElement('fake');
const transitions = {
'transition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd'
};
for (const t in transitions) {
if (el.style[t] !== undefined) return transitions[t];
}
return 'transitionend';
}
const transitionEvent = getTransitionEvent();
element.addEventListener(transitionEvent, handler);
为什么setTimeout(fn, 0)在回调里很关键
这是最容易被忽略的实操细节。当你想在 transitionend 后立刻重新触发同一过渡（比如循环动画），直接操作 class 会失效：
- 原因：浏览器把“移除 class → 添加 class”压进同一个渲染帧，样式引擎判定无变化，跳过重排
- 解法：用
setTimeout(fn, 0)或requestAnimationFrame(fn)把类操作推到下一宏任务 - 示例：
element.addEventListener('transitionend', () => {
element.classList.remove('moving');
setTimeout(() => {
element.classList.add('moving'); // ✅ 这样才能重新触发
}, 0);
});
注意：这里 setTimeout 的延迟值写 0 就够了，不用匹配 transition-duration；浏览器会自动对齐下一帧，写具体毫秒反而容易错位。
真正难的不是绑事件，而是判断“这次结束是否可信”——属性有没有真变、有没有被中断、是不是你关心的那个属性。别把 transitionend 当成黑盒回调，它只是通知“某个可过渡属性结束了”，剩下的得你来兜底。
