关于View Transitions API中finished promise的使用疑问

我对View Transitions API存在疑问，已知ready promise完成后finished promise会执行，但我不太理解为何要使用finished promise。以下是我的代码示例：

let lastClick;
addEventListener("click", (event) => (lastClick = event));

function navigateToCards(data) {
  if (!document.startViewTransition) {
    updateDOM(data);
    return;
  }

  const transition = document.startViewTransition(() => {
    updateDOM(data); 
  });

  transition.ready.then(() => {
    document.documentElement.animate(
      {
        transform: [
          `translateX(100%)`,
          `translateX(0%)`,
        ],
      },
      {
        duration: 300, 
        easing: 'ease-in-out', 
        pseudoElement: "::view-transition-new(cards)",
      }
    );
  });
}

这段代码可在跳转页面时为卡片添加动画，想请教finished promise的具体适用场景。

finished Promise的核心适用场景 #

ready仅表示过渡的初始状态已准备就绪（DOM已更新，过渡伪元素已创建），而finished会等待所有过渡动画完全结束后才resolve，它主要用于以下场景：

• 清理过渡相关资源：动画结束后移除临时添加的CSS类、清理事件监听或重置自定义过渡状态。比如过渡开始时给元素加了transition-active类，就可以在finished回调里移除，避免影响后续交互。

• 触发依赖动画完成的后续操作：过渡结束后加载更多内容、执行数据上报，或者初始化新页面的复杂组件，避免动画与组件初始化的逻辑冲突。

• 处理过渡中断或失败：finished会在过渡被取消（比如用户快速触发另一个导航）或失败时reject，可在catch中做降级处理，比如强制重置DOM状态，避免页面停留在异常过渡状态。

• 同步多动画时序：如果页面有多个独立的View Transition，或View Transition与其他自定义动画结合，finished可作为所有动画完成的信号，确保后续操作在视觉状态完全稳定后执行。

举个实用的代码示例，用finished做状态清理：

function navigateToCards(data) {
  if (!document.startViewTransition) {
    updateDOM(data);
    return;
  }

  const transition = document.startViewTransition(() => {
    updateDOM(data); 
  });

  transition.ready.then(() => {
    document.documentElement.classList.add('transition-in-progress');
    document.documentElement.animate(
      {
        transform: [`translateX(100%)`, `translateX(0%)`],
      },
      {
        duration: 300, 
        easing: 'ease-in-out', 
        pseudoElement: "::view-transition-new(cards)",
      }
    );
  });

  // 动画结束或中断时清理临时样式
  transition.finished
    .then(() => document.documentElement.classList.remove('transition-in-progress'))
    .catch(() => document.documentElement.classList.remove('transition-in-progress'));
}

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