Bramus
Published: Mar 27, 2026
Chrome 147 引入了元素范围内的视图转换，这项功能可让您通过调用 Element.startViewTransition() 在 DOM 的子树上启动视图转换。
借助此功能，您可以同时运行多个视图转换，嵌套正在进行的视图转换，并解决 position: fixed 内容的图层问题，同时保持页面的其余部分可交互。
有哪些变化？
自从我们在 Chrome 140 中宣布 该功能已准备好供开发者测试 以来，我们一直与社区和 CSS 工作组合作，以最终确定详细信息，尤其是有关默认行为的详细信息：
- 默认情况下，范围根是自行参与的。
- 限定了范围的视图转换会自动使用嵌套的视图转换组来包含其嵌套的伪元素。
- 如果范围根剪辑其溢出，则限定了范围的视图转换中的
::view-transition-group-children()伪元素会自动剪辑其内容。 - 在转换期间，元素范围内的视图转换会自动将
contain: layout和view-transition-scope: all应用到范围根。
进行这些更新后，元素范围内的视图转换将从版本 147 开始在 Chrome 稳定版 中提供。
演示
随机列表
此演示可让您随机排列每个列表中的项。您还可以通过选择中间的按钮来交换列表的位置。
实时演示
演示录制内容
由于使用了元素范围内的视图转换，因此这两个列表可以同时运行其随机视图转换。您还可以在列表项仍在重新排列时启动外部视图转换，该转换会交换列表的位置。
我的巴塔哥尼亚之旅
“我的巴塔哥尼亚之旅”演示展示了元素范围内的视图转换。此演示是根据“Web UX，重新构想”宣传视频构建的。
使用下拉菜单 过滤网格项。使用每个网格项上的添加 按钮将其添加到所选项列表中，该列表会显示在边栏 中。
实时演示
如需查看完整演示，请在单独的标签页中打开“我的巴塔哥尼亚之旅”。
演示录制内容
该演示在三个位置使用了元素范围内的视图转换：
- 过滤项时的项网格。
- 将项添加到所选项列表时的网格项。
- 显示所选项列表的边栏。
阅读指南
如需全面了解元素范围内的视图转场，请阅读指南。该指南介绍了如何实现元素范围内的视图转换，详细说明了其他详细信息，并提供了更多演示。