已准备好进行开发者测试：限定范围的视图过渡

Bramus

发布时间：2025 年 9 月 10 日

范围限定的视图转换是 View Transition API 的一项提议的扩展功能，可让您在 DOM 的子树上启动视图转换。从 Chrome 140 开始，在 chrome://flags 中启用“实验性 Web 平台功能”标志后，即可测试该功能。我们正在积极征求开发者的反馈。

简介

如需启动限定范围的视图过渡，请对应用了 contain: layout 的任何 HTMLElement 调用 element.startViewTransition()（而非 document.startViewTransition()）。

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

结果是范围限定为所选 HTMLElement 子树的视图转换，生成的 ::view-transition 伪树会注入到该 HTMLElement 中。HTMLElement 用作过渡动画的容器。

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

范围限定的过渡效果允许同时运行多个视图过渡效果（只要它们具有不同的过渡根）。仅在该子树上阻止指针事件（您可以重新启用），而不是在整个文档上阻止。此外，它们还允许在限定范围的视图过渡之上绘制过渡根之外的元素。

如需全面了解范围限定的视图过渡，请参阅范围限定的视图过渡说明。

演示

在以下演示中，您可以点击某个按钮，在容器内移动圆点。您可以使用文档范围的视图过渡或元素范围的视图过渡来实现此目的，从而了解它们的行为方式有何不同。

实时演示

演示录制

使用限定范围的视图过渡时，圆点在过渡期间会一直被其父级裁剪。此外，当显示圆点时，圆点不会覆盖弹出式窗口。

欢迎提供反馈

我们希望从 Web 开发者社区收集有关以下方面的反馈：

  • Scoped View Transitions API 的形状。
  • 该功能运行良好或未按预期运行的使用情形。
  • 如何解决有关自行参与范围的问题。

请通过评论 CSS WG 问题 #9890 来分享您的反馈。在提供反馈之前，请先熟悉已知问题和限制。

如果您遇到 bug，请提交 Chromium bug 以告知我们。