一、传统多页面应用的体验痛点
单页面应用（SPA）之所以流行，一个重要原因是它们能够提供流畅的页面过渡效果。而传统多页面应用（MPA）在导航时，整个页面会瞬间刷新，出现白屏闪烁，用户体验生硬。过去为了在MPA中实现平滑过渡，开发者不得不引入复杂的JavaScript库或使用pjax、Turbolinks等方案，但这些都增加了维护成本。
如今，浏览器原生提供的View Transitions API彻底改变了这一现状。它允许跨页面导航时，浏览器自动捕获旧页面和新页面的视觉状态，并在两者之间执行平滑过渡动画。更激动人心的是，这一切只需在HTML中添加一个meta标签即可启用，配合CSS便可进行精细的动画控制，完全不需要任何JavaScript。
二、启用View Transitions：一步设置
要开启多页面视图过渡，只需在每个页面的<head>中添加以下meta标签：
<meta name="view-transition" content="same-origin">这个标签告诉浏览器：在同源页面之间导航时，请执行视图过渡。添加后，当用户点击链接从一个页面跳转到另一个页面，浏览器会做以下几件事：
- 截取当前页面的快照（称为“旧视图”）。
- 渲染新页面并截取新页面的快照（“新视图”）。
- 在两者之间插入一段可自定义的CSS动画，实现平滑过渡。
默认的过渡效果是一个简单的交叉淡入淡出：旧页面逐渐透明，新页面逐渐显现，整个过程约持续0.25秒。这种无侵入的体验提升，让多页面应用的导航瞬间拥有了类SPA的质感。
三、自定义过渡动画：掌握伪元素
浏览器在执行视图过渡时，会创建一组伪元素来表示过渡的视觉层。开发者可以通过CSS对这些伪元素进行样式化，从而改变动画表现。核心伪元素包括：
- ::view-transition-old(root) — 代表旧页面的快照。
- ::view-transition-new(root) — 代表新页面的快照。
- ::view-transition-group(root) — 包裹新旧快照的容器。
以下CSS代码将默认的淡入淡出替换为滑动效果：
/* 旧页面从左侧滑出并淡出 */
::view-transition-old(root) {
animation: slide-out-to-left 0.4s ease both;
}
/* 新页面从右侧滑入并淡入 */
::view-transition-new(root) {
animation: slide-in-from-right 0.4s ease both;
}
@keyframes slide-out-to-left {
to {
transform: translateX(-30%);
opacity: 0;
}
}
@keyframes slide-in-from-right {
from {
transform: translateX(30%);
opacity: 0;
}
}将这段CSS放在每个页面的样式表中，全站导航就会呈现推入推出的滑动效果。你可以调整动画时长、缓动函数甚至变换方式，打造独特的品牌过渡体验。
四、为特定元素创建独立过渡（变形动画）
仅仅对整个页面做动画还不够，View Transitions API 的真正魔力在于能够为页面中的特定元素创建连续的变形过渡。例如，从一个产品列表页点击某件商品，让该商品的图片从列表位置平滑移动到详情页的顶部。这需要为相关元素设置相同的view-transition-name属性。
假设列表页中每个产品卡片包含一张图片：
<!-- 列表页 product-list.html -->
<a href="product-detail.html" rel="external nofollow" class="card">
<img src="product1.jpg" style="view-transition-name: product-image">
<h3>产品名称</h3>
</a>在对应的详情页，使用相同的view-transition-name：
<!-- 详情页 product-detail.html -->
<img src="product1-large.jpg" style="view-transition-name: product-image">需要注意，每个页面中每个view-transition-name必须是唯一的。如果列表页有多个产品卡片，不能都命名为product-image，必须为每个卡片动态生成不同的名称（例如通过后端模板在名称后追加ID：product-image-101）。浏览器会根据名称匹配旧页和新页中的元素，并自动计算它们的位置与大小差异，生成平滑的移动和缩放动画。
也可以在CSS中定义名称，但内联样式便于动态赋值。
五、控制过渡动画的类型与方向
有时我们需要根据导航方向（前进或后退）应用不同的动画。View Transitions API 没有直接提供方向判断，但我们可以通过页面URL或历史长度来推测，并动态添加类名。不过不依赖JavaScript的情况下，我们可以利用CSS的:only-child或不同的过渡名称来设计不同的动画。更常见的做法是，为某些特定类型的链接添加data属性，并依赖浏览器的默认快照机制。
一种更简单的方式是：为前后向导航使用不同的页面过渡组。例如，返回按钮通常预期反向动画。虽然这通常需要一点脚本，但我们可以通过监听pageswap事件（如果需要的话）来改变动画，但也可以完全依赖浏览器的默认快照顺序——浏览器总是按“旧-新”顺序播放，动画方向由我们的CSS决定。如果想制作“返回时动画反向”，则需要结合CSS自定义属性和少量的脚本设置。不过在许多场景下，统一的向左或向右滑动已经能提供优秀的体验。
六、完整示例：产品列表到详情的优雅蜕变
以下是一个完整的多页面过渡示例。首先确保所有页面头部包含meta标签：
<head>
<meta name="view-transition" content="same-origin">
<meta charset="UTF-8">
<title>产品展示</title>
</head>全局CSS定义页面级别的滑动动画，同时定义元素级过渡的默认状态：
/* 页面根过渡 */
::view-transition-old(root) {
animation: slide-out-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
animation: slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes slide-out-left {
to { transform: translateX(-20px); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(20px); opacity: 0; }
}
/* 为独立过渡元素提供默认的淡入动效 */
::view-transition-new(product-image) {
animation: fade-in 0.3s ease both;
}
@keyframes fade-in {
from { opacity: 0; }
}产品列表页面（product-list.html）结构：
<div class="product-grid">
<a href="product-detail.html?id=101" rel="external nofollow" class="card">
<img src="img101-thumb.jpg" style="view-transition-name: product-101">
<span>无线耳机</span>
</a>
<a href="product-detail.html?id=102" rel="external nofollow" class="card">
<img src="img102-thumb.jpg" style="view-transition-name: product-102">
<span>智能手表</span>
</a>
</div>产品详情页面（product-detail.html）中对应的图片：
<img src="img101-large.jpg" style="view-transition-name: product-101">
<div class="details">
<h1>无线耳机</h1>
<p>详细描述...</p>
</div>当用户点击“无线耳机”卡片时，浏览器会自动将列表页中缩略图的位置、尺寸记录为旧状态，将详情页中大图的新状态作为目标，生成流畅的缩放和平移动画。整个过程由浏览器原生处理，不涉及任何JavaScript。
七、处理过渡中的内容变化与回退
由于视图过渡期间，新旧页面的DOM同时存在（作为快照），你可能会遇到一些内容闪烁或布局偏移的问题。例如，如果新旧页面的背景色不同，过渡期间会出现颜色叠加。建议为新旧页面根元素设置相同的背景色，或者通过::view-transition-group(root)设置背景。
另外，如果新页面加载较慢，过渡可能会延迟。浏览器会等待新页面的首次渲染完成才开始过渡，因此确保页面关键渲染路径优化良好很重要。
对于不支持View Transitions API的浏览器（如Firefox目前默认未开启），添加meta标签不会有任何副作用，页面导航行为保持不变。我们可以通过CSS的@supports来检查支持情况，但即便不检查，也只是看不到动画，功能无损。这种渐进增强的策略非常适合生产环境。
八、更多可能：与动画库结合及调试
View Transitions API 虽然原生，但不排斥JavaScript。你可以使用document.startViewTransition()（SPA中常用）或在MPA中监听pageswap和pagereveal事件来添加更复杂的逻辑。但在MPA场景下，我们追求的是零脚本的简洁性，CSS动画已经足够强大。
Chrome DevTools 提供了专门的面板来调试视图过渡。在“Animations”面板中，你可以慢放过渡动画，检查每一帧的状态，甚至可以暂停并捕获快照，这极大方便了调试自定义动画。
九、总结
View Transitions API 为多页面应用带来了原生、高性能的页面过渡能力。仅需一个meta标签，就能彻底告别生硬的页面刷新。通过CSS伪元素自定义动画，以及view-transition-name实现元素级别的变形过渡，开发者可以创造出媲美原生应用的浏览体验。
这项技术目前仍在不断发展，但它已具备生产可用的质量。如果你的网站是内容驱动的多页面应用（如电商、博客、文档站），现在就可以尝试启用View Transitions，为用户提供更加连贯和愉悦的导航感受。在追求极致用户体验的路上，浏览器正在为我们提供越来越多的原生利器，而View Transitions无疑是最令人兴奋的一项。
