视图过渡是在网页或应用界面的不同状态之间无缝切换的动画过渡。View Transition API 经过专门设计，可让您以比以往更直接和更高效的方式来创建这些效果。与之前的 JavaScript 方法相比，该 API 具有诸多优势，包括：
- 改善的用户体验：流畅的过渡和视觉提示可引导用户完成界面的变化，使导航感觉自然、不突兀。
- 视觉连续性：保持视图之间的连续性可以减少认知负担，有助于用户始终关注应用中的内容。
- 性能：API 会尝试尽可能少地使用主线程资源，从而创建更流畅的动画。
- 时尚美观：经过改进的过渡有助于打造更完善且引人入胜的用户体验。
本文是系列文章中的一篇，该系列讨论了电子商务公司如何使用新的 CSS 和界面功能增强其网站。在本文中，您将了解一些公司如何实现 View Transition API 并使其受益。
redBus
redBus 一直致力于在其原生体验和 Web 体验之间建立尽可能多的对等性。在 View Transition API 问世之前，在我们的网络资源上实现这些动画颇具挑战。但是，我们发现，使用 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
该团队使用视图过渡来添加在用户切换产品缩略图时淡出动画。
实现非常简单，通过使用
startViewTransition，我们立即获得了比先前的实现更愉悦的淡出转场，而且没有任何影响 - Tokopedia 高级软件工程师 Andy Wihalim。
之前
之后
代码
以下代码使用 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 Transition API，使它们具有视觉吸引力，并改进了此类功能的使用情况。
通过整合视图过渡，我们消除了用于管理不同状态的动画的重复 CSS 和 JavaScript 代码。这不仅节省了开发工作量，还显著改善了用户体验。- Policybazaar 技术负责人 Aman Soni。
代码
以下代码与前面的示例类似。需要注意的一点是，能够替换 ::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 Transition API 时的注意事项
在同一页面上使用多个视图转换效果时，请确保为每个效果或部分使用不同的 view-transition-name，以免发生冲突。
当视图过渡处于活动状态（过渡）时，会在界面的其余部分之上添加一个新层。因此，请避免在悬停时触发转换，因为 mouseLeave 事件会意外触发（当实际光标尚未移动时）。
资源
- 使用 View Transition API 实现轻松顺畅的转场
- 解说：MPA 的视图过渡
- 案例研究：通过视图过渡实现无缝导航
- 案例研究：Web Can Do What!?| 提供类似应用的导航
- 互操作性建议：让视图过渡效果可在各种浏览器中使用
- 您想要报告 bug 或请求新功能吗？我们期待收到您对 SPA 和 MPA 的反馈。
阅读本系列中的其他文章，了解电子商务公司如何通过使用新的 CSS 和界面功能（例如滚动条驱动的动画、弹出式窗口、容器查询和 has() 选择器）获益。