animationend事件切换至其他标签页时不触发的解决求助

这个问题其实是现代浏览器的性能优化策略导致的——当标签页处于非活动状态时，浏览器会暂停CSS动画的执行，以此节省CPU和GPU资源，所以animationend事件自然要等到标签页重新激活后才会触发。下面给你两种可行的解决方案：

方案一：使用Web Animations API（推荐） #

Web Animations API是浏览器原生的动画接口，它不受后台标签页的动画暂停限制（主流浏览器如Chrome、Firefox、Edge都已支持），可以完美解决这个问题。

把你的CSS动画逻辑迁移到Web Animations API，代码示例如下：

$(function() {
  const animateElement = document.querySelector('.animate');
  // 替换成你自己的CSS关键帧动画逻辑
  const animation = animateElement.animate(
    [
      { opacity: 0, transform: 'translateX(-100%)' },
      { opacity: 1, transform: 'translateX(0)' }
    ],
    {
      duration: 1500, // 和你的CSS动画时长保持一致，单位ms
      iterations: 1,
      fill: 'forwards' // 保持动画结束后的状态
    }
  );

  // 监听动画结束事件
  animation.onfinish = function() {
    alert('Animation End !!!');
  };
});

这样即使标签页在后台，动画会基于真实系统时间计时，到点就触发onfinish事件，完全不受后台节流影响。

方案二：手动跟踪动画时长（兼容旧场景） #

如果你必须保留原有CSS动画，可以通过requestAnimationFrame结合系统时间戳来手动判断动画是否结束，不受后台暂停的干扰：

$(function() {
  const $animateEl = $('.animate');
  const animationDuration = 1500; // 必须和CSS里的animation-duration完全一致
  let startTime;

  function checkAnimationEnd(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsedTime = timestamp - startTime;

    if (elapsedTime >= animationDuration) {
      alert('Animation End !!!');
      return;
    }
    requestAnimationFrame(checkAnimationEnd);
  }

  // 启动时长跟踪
  requestAnimationFrame(checkAnimationEnd);
  // 保留原有的animationend监听作为前台场景的 fallback
  const aE = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $animateEl.one(aE, function() {
    alert('Animation End !!!');
  });
});

这个方法的核心是利用requestAnimationFrame传递的时间戳（真实系统时间）计算动画运行时长，哪怕后台时requestAnimationFrame被节流，时间戳依然能准确反映实际流逝的时间，从而精准触发结束回调。

内容的提问来源于stack exchange，提问作者Thịnh Nguyễn Đức