利用 View Transition API，您可以在一个步骤中更新 DOM，同时生成两种状态之间的动画转换。
这类转换是包括我在内的开发者经常请求的功能，我认为我们已设法在良好的默认与可扩展性和自定义之间取得平衡。这听起来像是表扬后行，但开发者 反馈是设计此功能的关键。此功能的早期原型的灵活性大大降低，那些花时间试用原型并提供反馈的人（比如您？）引发了彻底的反思。谢谢！
要开始使用该功能并查看一些演示，请查看我们的指南。如果您觉得其中并未涵盖您，请在 Twitter 上、Mastodon或通过电子邮件与我联系。
View Transition API 目前仅在 Chrome 中提供；幸运的是，它可以用作渐进式增强功能。本指南包含可在不同浏览器中使用的辅助函数，但只有支持视图过渡的浏览器才会获得动画。
我们在 CSS 工作组的帮助下开发了这项功能，并参考了其他浏览器供应商和独立机构的意见。我们不知道其他浏览器是否或何时会采用 View Transitions，但请密切关注 Mozilla 的标准立场和 WebKit 的标准立场。
但是，我们尚未“完成”！
Chrome 111 中的功能只是第一个版本。我们希望我们已经发现了所有错误。不过，如果您发现任何错误，请通过 crbug.com 提交，最好是提供简化的演示版。如果您对此不满意，请通过 Twitter、Mastodon 或电子邮件与我联系，我将为您提供帮助。
从宏观角度来说，这个版本虽小，但很有参考价值。我们已经拟定了此功能的一些扩展方案，以确保我们当前推出的部件能够兼容未来。
下面简要介绍了我们的想法。这些内容并不是按优先级顺序排列的（可能第一个对很多人来说是最重要的），因此我们希望收到关于哪些新增内容对您最重要的反馈。
跨文档转换
这是大多数开发者都希望我们接下来要做的事情。好消息是，我们已经在努力！
View Transitions API 经过精心设计，可以跨同源文档运行。唯一的区别在于，导航本身会发出信号，而不是 startViewTransition 发出 DOM 状态变化的信号。
我们在 chrome://flags/#view-transition-on-navigation 标志后的设计原型。欢迎参阅超级简单的演示和更复杂的演示。
为了继续推进，我们需要确定每个页面是如何选择转换的。目前，我们使用的是元标记 <meta name="view-transition" content="same-origin">，但我们认为 CSS 更适合用于这种情况。我们还希望能够让您更轻松地了解要转换的页面类型，最好是无需编写 JavaScript 即可。
工作量繁多，我们更希望“正确”而不是“快速”，但这无疑是我们的优先事项。
合成器驱动的动画
默认情况下，我们选择为过渡组的宽度和高度添加动画效果，因为自定义设置要容易得多。不过，这意味着动画在主线程上运行，这种情况并不理想，尤其是在网页加载期间。
我们计划检测默认动画和常见的自定义设置，然后将其重新解释为合成器驱动的动画，以提升性能。
作用域转换
目前，SPA 转换的范围限定为整个文档，并且一次只能运行一个转换。我们希望引入一项功能，允许将转换的作用域限定为特定元素，以便多个页面组件可以独立运行转换。
例如，这可让嵌入式视频播放器与嵌入式聊天微件同时使用视图转换。
嵌套转换组
目前，所有 ::view-transition-group 都是同级。这通常是一件好事，因为它允许视图从一个容器转换到另一个容器，而不必担心被裁剪。
不过，有时您希望视图被某个父项裁剪，而该父项可能也会参与过渡。
我们希望调查将特定 ::view-transition-group 放置在另一个 ::view-transition-group 中的选择启用选项。
过渡类别
每个 view-transition-name 都必须是唯一的。通过这种方式，我们可以确定某个元素在概念上在 DOM 更改的任一侧是“相同”的，即使它实际上不是同一个元素。
不过，有时具有不同 view-transition-name 的内容应使用同一种类的动画。现在，这意味着为每个 view-transition-name 添加一条选择器规则。
我们希望添加一种创建过渡类的方法来克服这一限制。
忽略屏幕外元素
如果您为元素指定 view-transition-name，它将作为自己的组参与转换。有时这并不理想。例如，如果您为标题指定 view-transition-name，并从中向下滚动 2,000 像素的状态转变为网页顶部的状态，则标题将从 2,000 像素处开始以动画形式呈现，这会在时间方面让人感觉出错。
相反，我们想添加一个选项，以便忽略某个元素，就好像该元素没有 view-transition-name 一样，前提是该元素完全位于视口之外。
您已经可以通过动态设置 style.viewTransitionName 来使用 JavaScript 执行此操作，但我们觉得我们应该有一个声明式解决方案来实现此目的。
requestAnimationFrame 驱动的动画
您已经通过 Web Animation API 使用 JavaScript 创建视图过渡动画，但有时您需要使用 requestAnimationFrame 逐帧驱动元素。
你已经可以这样做了，但有点棘手。点击此处查看演示，其中提供了一些实用帮助程序。我们希望打造出防黑客入侵模式！
我们将分两部分来介绍。其一，提供 API 来指示动画何时完成。第二，通过提供对伪元素的 JavaScript 访问权限。第二部分可能是一项相当大的工作，但从长远来看，这是正确的做法。
现在，做一些出色的视图转换吧！
希望您和我一样，对此功能的未来和未来感到兴奋。如果你有任何反馈，或者只是想展示你所做的一些视图转换，是流畅、实用的，还是普通 的，请在 Twitter 上或 Mastodon 与我联系！