过渡对用户有诸多好处，包括有助于让用户了解相关情境，以及减少对延迟的感觉。开发者希望能够在页面之间创建流畅的转换，从而提高用户对其网站的互动度。
不过，启用状态转换非常困难，因为这需要开发者管理两个不同元素的状态。即使是简单的交叉淡出，也涉及同时呈现这两种状态。这会带来易用性方面的挑战，例如处理传出元素的其他互动。对于辅助设备的用户来说，在一段时间内，前后状态会同时位于 DOM 中。此外，内容可能会在树状结构中以易于直观的方式移动，但很容易失去阅读位置和焦点。
View Transitions API 在 Chrome 111 中发布，可让您在页面之间创建简单流畅的转换效果。借助它，您可以在状态之间进行 DOM 更改，而不会出现任何重叠，并使用快照视图在状态之间实现过渡动画。
您可能想知道，实现起来有多容易？有哪些应用场景？其他开发者如何使用 View 转换？
本文将向您介绍 4 个不同网站（RedBus [旅游]、CyberAgent [新闻/博客发布商]、Nykaa [电子商务] 和 PolicyBazaar [保险]）中 View Transitions API 的实现方式，以及这些网站如何通过使用 View Transitions API 获得不同方面的益处。
redBus
redBus 隶属于 MakeMyTrip 集团，是一个巴士预订和票务网站，总部位于印度班加罗尔，业务遍及全球各个地区。它是首批使用 View Transitions API 实现体验的网站之一。
Redbus 为什么要实现视图过渡？
redBus 团队坚信，应提供统一的、类似应用的 Web 体验，该体验应尽可能接近其原生应用。事实上，他们多年来已实施了多个定制解决方案。例如，他们在 View Transitions API 开发之前就推出了基于 JavaScript 和 CSS 的自定义页面转换动画。不过，这意味着他们必须处理网络和设备的低端细分市场的性能管理，这有时会导致采用自适应加载策略时出现差异化体验。
redBus 针对多种用户体验历程使用了视图转换。例如，在其移动应用的自助部分（在自定义 Chrome 标签页中打开网页），以及在其公交车票预订漏斗中（用户从商品详情页转到付款页）。在后一种情况下，视图转换使页面之间的导航更加流畅，从而提高了转化率。这是因为在执行繁重操作（例如获取最新的可用广告资源）时，用户体验和感知性能更好。
实现的技术细节
redBus 使用 React 和 EJS 作为其前端技术栈，并在不同的历程中组合使用 SPA 和 MPA。以下代码段展示了如何使用视图转换：
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
在以下 CSS 中，slide-to-right、slide-to-left、slide-from-right 和 slide-from-left 是 CSS 动画关键帧。
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
业务影响
redBus 选择在其网站上实现视图转换并改进 INP，结果销量提高了 7%。redBus 的高级工程经理 Amit Kumar 表示，对于真正希望提供更好的用户体验并希望减少维护开销的开发者来说，视图转换非常棒。
我们已开展全面的用户反馈会话，从各种各样的用户那里收集了有价值的数据洞见。我们对用户群（公交和铁路）及其需求有着深刻的了解，再加上我们的专业知识，让我们相信这项功能从一开始就能提供巨大价值，而无需进行 A/B 测试。视图转换是通过顺畅的导航体验缩小应用和网站之间差距的一步。
Anoop Menon，redBus 首席技术官
CyberAgent
CyberAgent 是一家总部位于日本的 IT 公司，提供包括博客和新闻发布在内的多种在线服务。
CyberAgent 为何实现视图转换？
过去，CyberAgent 曾考虑使用 CSS 动画或使用框架来实现动画过渡以改善用户体验，但他们担心渲染 DOM 的性能不佳以及代码可维护性。当 Chrome 添加了对 View Transitions API 的支持后，他们很高兴能够使用该 API 创建富有吸引力的页面转换效果，从而克服这些挑战。
CyberAgent 实现了博客列表和博客页面之间的视图转换。请注意，他们是如何向主推图像添加元素转换的。您可以立即访问其网站，亲自体验该功能。
他们还使用媒体查询，为不同的设备设计不同的动画体验。他们在移动网页中添加了元素转换，但这种效果在桌面设备上移动过多。
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
实现的技术详情
CyberAgent 使用 Next.js 构建其 SPA。以下代码示例演示了它们如何使用 ViewTransition API。
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
查看更多 Next.js 示例代码。
使用预渲染技术查看 MPA 的视图转换
CyberAgent 还在名为 Ameba News 的新闻门户网站上试用了我们新推出的适用于多页面应用 (MPA) 的 View Transitions API（目前处于标志 chrome://flags/#view-transition-on-navigation 下）。
在两个位置使用了视图过渡效果：第一种是更改新闻类别，如以下视频所示。
第二个按钮位于新闻精彩集锦页面之间，该页面会显示内容摘要；当用户点击了解详情时，报道的其余部分会淡入。
有趣的是，他们只为在点击按钮后会发生变化的部分添加了动画。对动画设计进行这项小调整后，从用户的角度来看，MPA 页面看起来更像 SPA，只有新内容会呈现动画效果：
具体方法如下：为网页的不同部分分配不同的 view-transition-name。例如，他们将一个 view-transition-name 分配给文章的顶部，另一个用于底部部分，并且未向顶部添加动画。
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
CyberAgent 使用 View Transitions API 的另一个有趣之处在于，他们使用了快捷链接在详情页面上轻松实现了预渲染规则。以下是他们的示例代码：
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
如需详细了解快速链接实现，请参阅这篇文章。
赞誉
CyberAgent 的 Ameba 服务技术主管 Kazunari Hara 表示，观看转换可能会对业务产生重大影响，原因有两个。
首先，它们会引导用户浏览网页。视图过渡可让用户在视觉上聚焦于最重要的信息，并帮助他们充分利用网页。此外，它们还可以通过动画来增强和强调品牌。CyberAgent 有一个指定的动画设计来传达其品牌信息。通过视图过渡，他们能够实现这种品牌体验，而无需增加维护外部库的成本。
视图过渡是我最喜欢的 API 之一。与依赖于库的其他解决方案相比，将动画添加为标准浏览器功能的功能使得视图转换更易于实现和维护。我们期待在更多服务中实现视图转换，以传达我们的品牌。
Ameba 首席技术官 Kazunari Hara
Nykaa
Nykaa 是印度最大的时尚美妆电子商务平台。他们的目标是让移动网站体验尽可能接近原生应用体验。在之前尝试实现转换动画时，他们在编写复杂的自定义 JavaScript 时遇到了困难。这也对其网站的效果产生了轻微影响。
Nykaa 为何实现视图转换？
随着视图转换的推出，Nykaa 团队看到了这样一个机会：这些转换是原生提供的，这意味着无需付出性能代价，即可显著改善页面转换的用户体验。Nykaa 大量使用视图转换来从商品详情页面转换到商品详情页面。
实现的技术详情
Nykaa 使用 React 和 Emotion 构建了 SPA。如需有关如何将 View 转场效果与 React 搭配使用的更多示例代码，请点击此处。
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
侧边抽屉动画的 CSS：
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
赞誉
Nykaa 应用主管 Sunit Jindal 表示，视图转换的最大优势在于“速度感知”。Nykaa 使用闪烁效果来等待内容从后端加载，但发现显示闪烁效果并不能让用户知道需要等待多长时间才能加载内容。使用视图转换时，转换本身会让用户感觉“即将发生某种变化”，从而减轻等待的痛苦。
Nykaa 非常高兴其网页的用户体验因视图转换而得到了提升，并已准备好在其他网页上实现视图转换。该公司设计副总裁的评价如下：
我们致力于在所有即将推出的功能中实现视图转换，前提是适当地实现这一点。我们已经确定了一些领域，并且正在积极投资这些领域。
设计副总裁 Krishna R V
PolicyBazaar
PolicyBazaar 总部位于古尔冈，是印度最大的保险聚合商和跨国金融科技公司。
PolicyBazaar 为何实现视图转换？
作为一家网络优先的公司，PolicyBazaar 团队始终致力于在其关键用户历程中提供最佳用户体验。在 View Transitions API 发布之前，使用 JavaScript 和 CSS 实现自定义转场效果是一种常见做法，因为这可以提升用户体验、打造流畅的导航流程，并改善网站的整体视觉吸引力。
不过，这些自定义实现的代价是，偶尔会出现基于性能的延迟、代码维护复杂性，以及与所用框架的兼容性不佳。View Transitions API 提供了简单易用的界面，并提供原生性能优势，帮助他们克服了其中的大多数挑战。
PolicyBazaar 在报价前流程中使用了不同元素之间的视图转换，让潜在买家在提供购买保险政策所需的详细信息时感到兴奋。
实现的技术细节
他们使用混合框架方法，大部分代码库都使用 Angular 和 React。以下是 PolicyBazaar 首席前端开发者 Aman Soni 分享的他们使用 Angular 编写的代码的 VT 摘录：
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
赞誉
该公司的设计主管（Life BU）Rishabh Mehrotra 表示，视图转换在提升易用性、互动度和整体满意度方面发挥了重要作用，从而为用户提升了网站体验。这有助于提供流畅的导航、引导式互动、降低认知负担、现代美学等。
提升 Web 体验是 PB 的首要目标，而事实证明，VT 是实现这一目标且提供出色的无缝体验的实用工具。它在开发者社区和用户群体中的广泛吸引力，让我们团队充满了热情。我们正在考虑在各种 POD 中集成该功能，预计这将对满意度和卓越运营产生深远的积极影响。
Saurabh Tiwari（PolicyBazaar 首席技术官）
后续步骤
您是否有兴趣试用视图转换？您可以参阅以下资源，了解详情：