介绍
提供动态页面转换是提升现代 Web 应用程序整体用户体验 (UX) 的关键因素。
从历史上看，为了在页面导航之间平滑地变形或淡出元素，开发人员必须导入大量 JavaScript 库，例如 Framer Motion 或 GSAP。这些库需要深度挂钩渲染生命周期，以在对旧 DOM 节点进行动画处理时延迟卸载。
W3C 标准 View Transitions API 的引入简化了这一过程。它允许浏览器以最少的 CSS 和 JavaScript 原生捕获状态并插入页面布局更新。
1. 什么是视图转换 API？
View Transitions API 的工作原理是捕获 DOM 修改之前和之后页面的快照状态，并在两个状态之间自动运行硬件加速的交叉淡入淡出或变形动画。
核心优势
- 减少样板： 无需在 JS 中处理计时器、关键帧或状态挂钩来推迟页面渲染。
- 卓越的性能： 由于过渡在 GPU 线程上本机运行，因此可以最大程度地减少视觉帧丢失。
- SPA 和 MPA 兼容性： 最初为单页应用程序构建，浏览器支持已扩展到涵盖多页应用程序 (MPA)。
2. 基本设置（SPA 示例）
让我们看看如何在标准应用程序中的 DOM 更新期间应用转换。
传统 DOM 更新
// The content updates instantly with no transition
function updateContent() {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
}
实现视图转换
只需将 DOM 更新函数包装在浏览器的 document.startViewTransition() 回调中即可。
function updateContent() {
// Check browser capability
if (!document.startViewTransition) {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
return;
}
// Animate the update
document.startViewTransition(() => {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
});
}
仅使用此包装器，浏览器即可捕获传出和传入状态，默认情况下执行 0.25 秒的交叉淡入淡出。
3. 通过 CSS 自定义转换
要自定义默认的交叉淡入淡出动画，您可以定位布局引擎在过渡状态期间公开的特定伪元素。
当调用 startViewTransition 时，浏览器会构造一个临时的伪元素树：
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) (Outgoing page snapshot)
└─ ::view-transition-new(root) (Incoming page snapshot)
要创建滑出和滑入过渡而不是交叉淡入淡出，请将以下内容添加到样式表中：
/* Disable default crossfades and bind custom keyframes */
::view-transition-old(root) {
animation: 0.3s ease-out both slide-out;
}
::view-transition-new(root) {
animation: 0.3s ease-out both slide-in;
}
@keyframes slide-out {
to { transform: translateX(-100%); }
}
@keyframes slide-in {
from { transform: translateX(100%); }
}
4. 部分级变形动画（英雄过渡）
View Transitions API 的一个突出功能是它能够自动跨页面变换各个布局元素，例如从卡片列表扩展到详细信息页面标题的图像。
设置 CSS 名称绑定
要将元素链接在一起，请将相同的 view-transition-name 属性应用于传出和传入元素：
/* Card list image on the listing page */
.card-thumbnail {
view-transition-name: article-hero-image;
}
/* Featured header image on the detail page */
.detail-main-image {
view-transition-name: article-hero-image;
}
浏览器在页面渲染期间匹配过渡名称，自动计算大小和坐标偏移，以将元素平滑地动画到新位置。
结论和浏览器支持
View Transitions API 在基于 Chromium 的浏览器（Chrome、Edge）和 Safari 中受支持，并且 Firefox 的实现正在进行中。
使用此 API，您可以使用 CSS 将高性能页面转换添加到您的 Web 应用程序。尝试将主要路由更改包装在 startViewTransition 中以亲身体验。