此页面由 Cloud Translation API 翻译。

关于视图转换的误解

Bramus

View Transition API 是 Web 开发领域的颠覆性技术。无论您的网站是单页还是多页，此强大的 API 都可以让您在视图之间实现无缝过渡，从而打造出如同原生态一样令人着迷的体验。目前在 Chrome 中提供，相同的文档视图转换功能即将在 Safari 中推出。

随着越来越多的人开始研究 View Transition API，是时候揭穿一些误解了。

误解 1：View Transition API 截取屏幕截图

运行视图转换时，该 API 会拍摄内容的旧状态和新状态的快照。然后，这些快照会进行动画处理，如文档的“这些转场效果的运作方式”部分中所详述。

虽然您可以使用“屏幕截图”一词作为旧快照，但新快照不是屏幕截图，而是节点的实时表示形式。您可以将其视为被替换的元素。

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root) 👈 Screenshot
      └─ ::view-transition-new(root) 👈 Live representation

得益于这种实时性，此类演示能够正常运行：在视图转换期间，源自新快照的视频会继续播放。

参与视图转换的正在播放的视频极简演示。来源。

我们的文档详细介绍了用于此目的的逻辑和 CSS。

误解 2：捕获多个元素会导致运行多个视图转换

捕获多个元素时，快照过程会捕获所有旧状态和新状态。除了 :root 元素之外，如果您还捕获了 .box，则会得到以下伪树：

::view-transition
└─ ::view-transition-group(root)
|  └─ ::view-transition-image-pair(root)
|     ├─ ::view-transition-old(root)
|     └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
   └─ ::view-transition-image-pair(box)
      ├─ ::view-transition-old(box)
      └─ ::view-transition-new(box)

虽然此树包含多个快照对，但只会运行一次视图转换。

目前，Chrome 只能同时针对每个文档运行一次视图转换。尝试快速点击此演示，开始新的视图过渡。您会发现，当新的转场效果开始时，正在进行的转场效果会跳转到结束。

误解 3：由于浏览器支持，您无法实现视图转换

许多开发者担心自己无法实现视图转换，因为只有 Chrome 支持此功能。好消息是，Safari 正在努力解决此问题，并将在即将发布的 Safari 18 版本中添加此功能。

不过，不要让稳定的浏览器支持妨碍您立即实现视图转换。View 转场效果非常适合渐进式增强。原始文档介绍了将此方法添加到代码的方法。

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

    // With a View Transition:
    document.startViewTransition(() => updateTheDOMSomehow());
}

如果您的浏览器支持同一文档视图转换，您将看到经过丰富的动画版。如果您的浏览器不支持，则会获得当前的体验。随着越来越多的浏览器支持视图转换，越来越多的用户将能够自动体验这种经过改进的版本。

同样的，跨文档视图转换也是如此。不支持这些属性的浏览器在解析样式表时会忽略 CSS 选择接受。

此案例研究详细介绍了该方法在电子商务中的成功实施

误解 4：视图转换会破坏增量渲染

有人声称视图转换会破坏增量渲染。这不正确：跨文档视图转换的指定目的是不会破坏 Web 的这一基本方面。

浏览器在有“足够”内容时才会开始呈现网页。在大多数浏览器中，这是在 <head> 中加载所有样式表、解析 <head> 中的所有会阻止渲染的 JavaScript 以及加载足够的标记后发生的。跨文档视图转换不会改变这一点：首次有意义的绘制所需的内容保持不变。在首次渲染后，浏览器可以（并且将会）增量渲染新收到的内容。

您可以选择在 DOM 中出现特定元素之前阻止渲染。如果您想确保参与视图过渡的元素出现在新页面上，这会非常方便。

为此，请使用以下链接标记：

<link rel="expect" blocking="render" href="#elementId">

这会替换浏览器用于确定何时执行首次渲染的启发词语：首次渲染会延迟到指定元素出现在 DOM 树中。

这种手动屏蔽功能内置了一些保护措施。例如，如果看到了闭合 </html> 标记，但未看到阻塞元素，则渲染将不再被阻塞。此外，您还可以添加自己的超时逻辑，以随时移除屏蔽属性。

显然，应谨慎使用会阻止内容呈现的扩展程序。需要根据具体情况评估阻止渲染的影响。默认情况下，除非您可以通过衡量对效果指标的影响，主动衡量和评估 blocking=render 对用户的影响，否则请避免使用 blocking=render。

误解 5：快照制作过程缓慢或成本高昂

在 View Transition API 准备新视图并获取其快照时，旧视图仍会向用户显示。因此，与不使用视图转换相比，用户会多看一小段时间的旧页面。不过，这种延迟可以忽略不计，实际上只有几帧。例如，在 Chrome 中，pageswap 的影响最多会导致两个过时帧：一个用于执行逻辑，另外一个用于确保快照已合并并缓存。

此外，快照的数据直接从合成器获取，因此无需执行额外的布局或重绘步骤即可获取快照数据。

额外误解：它是 View Transitions API

在讨论视图转换时，人们通常会提及“View Transitions API”。这是不正确的。该 API 称为“View Transition API”，请注意英文单词“Transition”是英文单词的英文缩写。

这种误解源于一些文章（包括我们关于 DCC 的官方文档）使用了错误的术语。

记住正确名称的诀窍是，您使用（一个）ViewTransition API 创建（一个或多个）视图转换。