两行跨文档视图过渡代码，你现在就可以在每个网站上使用

可以说，网络最深刻之处在于其链接页面的能力。点击或轻触链接，另一个网页就会在浏览器窗口中打开。再次点击，又是一个网页。在 2025 年，这已是如此显而易见，以至于感觉微不足道。但在 20 世纪 80 年代，当网络被构想出来时，通过链接从一个页面导航到另一个页面的想法是革命性的。

如果你早期上网，你可能会记得页面加载需要多长时间。你正在一个网页上，然后点击一个导航链接，接着就是等待……等待……等待……第一个页面完全消失，留下一个空白的白色浏览器窗口（最初是灰色）。然后下一个页面才开始慢慢地从上到下加载。一点一点地。

多年来，互联网连接速度加快，页面加载也越来越快。但很长一段时间里，页面之间仍然会闪过一片白色。第一页。空白的白色闪烁。下一页。即使第二个页面的大部分内容与第一个页面相同——相同的页眉、相同的侧边栏、相同的布局——但很明显，所有内容都被清除并重新绘制了。

如今，白色的闪烁（或暗模式下的灰黑色）已很少见到。有时页眉和侧边栏会重新绘制，但通常，它们在过渡时会保持不变。然而，早期的方式仍然影响着许多人体验网络的方式。

但现在，你可以在你的网站上添加两行代码，从根本上改变人们在你网站上从一个页面导航到另一个页面时的行为。

@view-transition {
  navigation: auto;
}

这会激活跨文档视图过渡（cross-document View Transitions）。它确保从一个页面到下一个页面中相同的任何元素都保持在原位。它使网站的背景颜色保持不变。然后，任何不同的内容——新元素的出现、旧元素的消失、页面背景变成不同的颜色——默认情况下，所有这些变化都以交叉淡入淡出（crossfade）的方式发生。

是的，一种交叉淡入淡出，就像溶解效果。网站会在旧页面和新页面之间淡入淡出内容的变化。效果如下所示。

请注意，页眉始终存在。它从不闪烁或移动。并且注意图像和其他主要内容在我们从一个网页切换到另一个网页时如何淡入淡出。在某些方面，这感觉根本不像我们导航到了另一个网页。

有些人认为这是一种让他们的网站感觉“更像应用程序”的方式。另一些人则会惊叹于 2025 年的网络与 1995 年的网络有多么不同。以及仅仅两行 CSS 如何从根本上改变人们在你网站上从一个页面导航到另一个页面时的行为。交叉淡入淡出取代了没有它时出现的空白切换和新内容切换。

任何时候你在网页中引入动画，都应该考虑动画是否会对运动敏感的用户造成问题。使用 prefers-reduced-motion 媒体查询来确定是否修改或停止视差效果、维度效果或缩放/比例等深度模拟等运动触发器。

但在这种情况下，溶解动画并没有引入运动。简单的交叉淡入淡出不会对运动敏感的人造成不良影响。当然，你应该自行评估哪些运动驱动的动画应该减少——但仅仅以可访问性为名义移除网络上 100% 的动画并不能带来真正有用的结果。仔细思考你引入的运动类型，以及使用我们设备时的整体体验。是某些类型的运动或运动程度开始对一些用户造成问题，而不仅仅是任何动画的存在。通过阅读我们的文章《响应式运动设计》，了解更多关于何时使用 prefers-reduce-motion 的信息。

浏览器支持情况如何？跨文档视图过渡（Cross-document View Transitions）在以下版本中获得支持：Safari 18.2、Chrome 126 和 Edge 126。这意味着全球约 85% 的用户正在使用支持此功能的浏览器。今天你可以完全放心地使用 View Transitions 实现此目的，因为回退行为是简单地不执行任何操作。不支持的浏览器行为与你未使用此代码时完全相同。所以为什么不使用它呢？它将为你的大多数用户带来效果，而其余用户则根本看不到任何变化。

你可以使用 View Transitions 做更多的事情。它是一个非常强大和复杂的 API。但要实现更多功能，需要的不仅仅是两行代码，也需要超过 800 字来解释。所以，对于这篇咖啡休息/小食大小的文章，我们就到此为止。

哦，你想知道更多吗？嗯……你可以从简单的溶解效果切换到其他效果，例如滑动动画。或者你可以使用同文档视图过渡（same-document View Transitions）轻松地将页面上的某个元素从一个位置动画到另一个位置。通过阅读 MDN Web 文档，深入了解 View Transitions 的强大功能。