ViewTransition：ready 属性

有限可用性

此功能并非基线功能，因为它在一些使用最广泛的浏览器中无法正常工作。

ready 是 ViewTransition 接口的只读属性，它是一个 Promise，在伪元素树创建并转换动画即将开始时完成。

如果转换无法开始，则 ready 将被拒绝。这可能是由于错误配置导致的，例如 view-transition-name 重复，或者如果传递给 Document.startViewTransition() 的回调抛出异常或返回一个被拒绝的 promise。

值

一个 Promise。

示例

在以下示例中，ready 用于触发一个自定义的圆形揭示视图转换，该转换从用户点击时的光标位置开始，动画由 Web Animations API 提供。

js
// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

此动画还需要以下 CSS，以关闭默认的 CSS 动画并阻止旧视图状态和新视图状态以任何方式混合（新状态“覆盖”旧状态的顶部，而不是过渡）

css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

规范

规范
CSS 视图转换模块级别 1
# dom-viewtransition-ready

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅