视图过渡是呈现动画效果，可在网页或应用界面的不同状态之间实现无缝过渡。View Transitions API 经过精心设计，让您能够以比以往更直观、更高效的方式创建这些效果。与以前的 JavaScript 方法相比，此 API 具有多种优势，包括：
- 改善了用户体验：流畅的过渡和视觉提示可以引导用户完成界面变化，让导航感觉更自然，更顺畅。
- 视觉连续性：在视图之间保持连续感可降低认知负荷，并有助于用户在应用内集中注意力。
- 性能：API 会尝试使用尽可能少的主线程资源，以使动画更流畅。
- 现代美感：改进的过渡效果有助于提供美观且富有吸引力的用户体验。
这篇博文是系列文章的一部分，讨论电子商务公司如何使用新的 CSS 和界面功能增强其网站。在本文中，您将了解一些公司如何实现 View Transitions API 并从中受益。
redBus
redBus 一直致力于在原生体验和 Web 体验之间尽可能多地保持一致。在 View Transitions API 推出之前，在我们的 Web 资源上实现这些动画颇具挑战性。但我们发现，通过该 API，可以在多个用户体验历程之间创建转场，从而使网络体验更接近于应用。所有这些功能再加上性能优势，使其成为所有网站都必须具备的功能。- Amit Kumar，redBus 高级工程经理。
该团队在多个位置实现了视图转换。下面是一个在首页上登录图标上呈现淡入和滑入动画效果组合的示例。
代码
此实现使用多个 view-transition-name 和自定义动画（scale-down 和 scale-up）。将 view-transition-name 与唯一值结合使用可将登录组件与页面的其余部分分隔开，从而分别为其添加动画效果。创建新的唯一 view-transition-name 还会在伪元素树中创建一个新的 ::view-transition-group（如以下代码所示），从而使其能够与默认 ::view-transition-group(root) 分开操纵。
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
该团队使用视图过渡功能，当用户在产品缩略图之间切换时添加淡出动画。
实现非常简单，与先前的实现（Andy Wihalim，Tokopedia 高级软件工程师 Andy Wihalim）相比，通过使用
startViewTransition，我们可立即获得更令人愉悦的淡出过渡效果。
之前
之后
代码
以下代码使用 React 框架并包含框架专用代码，例如flushSync.详细了解如何使用框架实现视图过渡。
这是一个基本的实现，它会检查浏览器是否支持 startViewTransition，如果支持，则会进行转换。否则，它会回退到默认行为。
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
政策集市
Policybazaar 的投资行业已经针对“为何购买”等帮助提示元素使用了 View Transitions API，使其具有视觉吸引力，并提高了此类功能的使用率。
通过整合 View Transitions，我们消除了负责管理各种状态动画的重复 CSS 和 JavaScript 代码。这节省了开发工作量，并显著改善了用户体验。- Aman Soni，Policybazaar 技术主管。
代码
以下代码与前面的示例类似。需要注意的一点是，能够替换 ::view-transition-old(root) 和 ::view-transition-new(root) 的默认样式和动画。在这种情况下，默认的 animation-duration 已更新为 0.4 秒。
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
使用 View Transitions API 时的注意事项
在同一页面上使用多个视图过渡效果时，请确保为每个效果或部分使用不同的视图过渡名称，以防止冲突。
当视图过渡处于活动状态时（过渡），它会在界面的其余部分之上添加一个新层。因此，请避免在悬停时触发转换，因为 mouseLeave 事件会意外触发（当实际光标尚未移动时）。
资源
- 使用 View Transitions API 实现流畅简单的转场
- 说明：MPA 的视图转换
- 案例研究：通过视图转换实现无缝导航
- 案例研究：网络能做什么？| 提供类似应用的导航
- 互操作性建议：确保视图转换可以跨浏览器使用
- 要报告 bug 或请求新功能吗？我们期待收到您对 SPA 和 MPA 的反馈。
浏览本系列中的其他文章，探讨电子商务公司如何利用新的 CSS 和界面功能（如滚动驱动的动画、弹出式窗口、容器查询和 has() 选择器）获益。