CSS Transition在非活跃浏览器标签页无法触发的问题及解决问询

问题背景 #

我有一个应用了CSS Transition的元素，当在非活跃标签页中修改element.style.left属性时，动画仅在切换回该标签页时才开始执行。

代码示例 #

HTML

<div id="box"></div>

CSS

#box {
  top: 50px;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  background-color: red;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: left;
  transition-timing-function: linear;
}

JavaScript

const box = document.getElementById("box");

let flag = true;

function move() {
  if (flag) {
    box.style.left = "800px";
  } else {
    box.style.left = "0";
  }
  flag = !flag;
}

function onVisibilityChange() {
  if (document.hidden) {
    console.log(Date.now(), "hide");
    move();
    console.log(Date.now(), "moved");
  } else {
    console.log(Date.now(), "show");
  }
}

document.addEventListener("visibilitychange", onVisibilityChange);
box.addEventListener("transitionstart", () => console.log(Date.now(), "transitionstart"));
box.addEventListener("transitionend", () => console.log(Date.now(), "transitionend" ));

控制台日志 #

1669760420590, "hide"
1669760420590, "moved"
1669760423272, "show"
1669760423273, "transitionstart"
1669760425264, "transitionend"

解决方案 #

方案1：直接跳转到目标状态（切换回标签页时完成动画） #

当标签页进入非活跃状态时，直接将元素设置为最终位置，避免触发延迟的过渡动画。修改visibilitychange事件处理函数：

function onVisibilityChange() {
  if (document.hidden) {
    console.log(Date.now(), "hide");
    const targetLeft = flag ? "800px" : "0";
    // 临时移除过渡，直接设置目标位置
    box.style.transition = 'none';
    box.style.left = targetLeft;
    // 强制浏览器重绘，避免样式合并导致无效果
    box.offsetHeight;
    // 恢复过渡属性
    box.style.transition = '';
    flag = !flag;
    console.log(Date.now(), "moved");
  } else {
    console.log(Date.now(), "show");
  }
}

方案2：使用Web Animations API替代CSS Transition #

Web Animations API在非活跃标签页中会保持动画进度计算，切换回标签页时直接显示当前动画状态，无需从头开始：

const box = document.getElementById("box");
let flag = true;
let currentAnimation = null;

function move() {
  // 取消当前正在执行的动画
  if (currentAnimation) {
    currentAnimation.cancel();
  }
  
  const targetLeft = flag ? 800 : 0;
  // 创建Web Animation
  currentAnimation = box.animate(
    [{ left: `${box.offsetLeft}px` }, { left: `${targetLeft}px` }],
    {
      duration: 2000,
      easing: 'linear',
      fill: 'forwards' // 动画结束后保留最终状态
    }
  );
  
  // 监听动画事件
  currentAnimation.onstart = () => console.log(Date.now(), "transitionstart");
  currentAnimation.onfinish = () => console.log(Date.now(), "transitionend");
  
  flag = !flag;
}

function onVisibilityChange() {
  if (document.hidden) {
    console.log(Date.now(), "hide");
    move();
    console.log(Date.now(), "moved");
  } else {
    console.log(Date.now(), "show");
  }
}

document.addEventListener("visibilitychange", onVisibilityChange);

补充说明 #

浏览器为节省资源，会对非活跃标签页的CSS Transition/Animation进行节流或暂停，这是默认的性能优化策略。Web Animations API相比CSS Transition，在后台执行时的进度维护更可靠，能保证切换标签页时显示正确的动画状态。

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