页面失焦时transitionend事件不触发的原因及解决办法

这个问题是浏览器的后台标签页性能优化策略导致的：

• 当页面处于不可见状态（切换到其他标签页、最小化窗口、切到其他应用）时，浏览器会主动冻结非紧急的UI渲染任务，降低CPU占用，CSS transition的计时和动画渲染会被暂停或者直接降帧到0
• 如果过渡的预期结束时间刚好落在页面不可见的时间段内，浏览器不会触发transitionend事件，部分浏览器甚至会直接将过渡跳转到结束状态，但不会下发对应的事件，等页面重新可见才会继续处理剩余的UI事件。

最稳妥的方案是事件监听+定时器兜底的双重判断逻辑，同时可以搭配页面可见性事件做兼容：

方案1：定时器兜底（最常用） #

你需要先拿到CSS中设置的transition-duration和transition-delay总时长，在绑定transitionend事件的同时开启一个兜底定时器，两个触发源任意一个先执行都可以触发回调，同时要加标志位避免重复执行：

let isExecuted = false;
// 总时长=过渡延迟+过渡持续时间，单位ms，要和CSS配置保持一致
const totalTransitionTime = 50 + 300; // 示例：delay 50ms + duration 300ms

function handleTransitionEnd() {
  if (isExecuted) return;
  isExecuted = true;
  // 清理定时器和事件监听器，防止内存泄漏
  clearTimeout(fallbackTimer);
  element.removeEventListener('transitionend', handleTransitionEnd);

  // 原业务逻辑
  console.log('transitionEnd fired');
}

element.addEventListener('transitionend', handleTransitionEnd);
// 兜底定时器，额外加50ms容错避免时钟差
const fallbackTimer = setTimeout(handleTransitionEnd, totalTransitionTime + 50);

如果需要监听多个过渡属性，可在事件回调中判断event.propertyName匹配你要监听的属性即可。

方案2：监听页面可见性事件做补充 #

如果过渡时长不固定，可以搭配visibilitychange事件，当页面重新可见时主动判断过渡是否已经结束，手动触发回调：

let transitionStartTime = Date.now();
const totalTransitionTime = 350; // 过渡总时长
let isExecuted = false;

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && !isExecuted) {
    const passedTime = Date.now() - transitionStartTime;
    if (passedTime >= totalTransitionTime) {
      handleTransitionEnd();
    }
  }
});

内容的提问来源于stack exchange，提问作者Sara Ree