文档：startViewTransition() 方法

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

startViewTransition() 方法是 Document 接口的一部分，它会启动一个新的同文档（SPA）视图转换，并返回一个 ViewTransition 对象来表示它。

当调用 startViewTransition() 时，会按照 视图转换过程 中的解释进行一系列步骤。

语法

js
startViewTransition()
startViewTransition(updateCallback)

参数

updateCallback 可选

一个可选的回调函数，通常在 SPA 视图转换过程中调用来更新 DOM，并返回一个 Promise。该回调函数在 API 拍摄当前页面的快照后调用。当回调函数返回的 Promise 完成时，视图转换将在下一帧开始。如果回调函数返回的 Promise 拒绝，则转换将被放弃。

返回值

一个 ViewTransition 对象实例。

示例

基本用法

在我们的 基本 SPA 视图转换演示 中，updateView() 函数处理了支持和不支持视图转换 API 的浏览器。在支持的浏览器中，我们调用 startViewTransition() 来触发视图转换过程，而无需担心返回值。

js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

规范

规范
CSS 视图转换模块级别 1
# dom-document-startviewtransition

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅