视图转换是指网页或应用界面的不同状态之间的动画化无缝转换。View Transition API 的设计旨在让您能够以比以往更简单、更高效的方式创建这些效果。与之前的 JavaScript 方法相比，此 API 具有多项优势，包括：
- 改进用户体验：流畅的转换和视觉提示可引导用户了解界面变化，让导航感觉自然且不突兀。
- 视觉连贯性：在视图之间保持连贯性有助于减轻认知负担，并帮助用户在应用中保持正确的方向。
- 性能：该 API 会尽量少用主线程资源，从而实现更流畅的动画。
- 现代美学：改进后的转场效果有助于打造精致且富有吸引力的用户体验。
本文是系列文章的一部分，介绍了电子商务公司如何使用新的 CSS 和界面功能改进其网站。在本文中，了解一些公司如何实现 View Transition API 并从中受益。
redBus
redBus 一直致力于尽可能让原生应用和网站体验保持一致。在 ViewTransition API 之前，在 Web 素材资源上实现这些动画非常具有挑战性。不过，我们发现，借助该 API，您可以直观地在多个用户体验历程中创建转场效果，从而让 Web 体验更像应用。所有这些优势再加上性能优势，使其成为所有网站的必备功能。- 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后，我们立即获得了更舒适的淡出转换效果。- Andy Wihalim，Tokopedia 高级软件工程师。
之前
之后
代码
以下代码使用 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
Policybazaar 的投资行业采用了 View Transition API，对“为何购买”等帮助提示元素进行了视觉美化，从而提高了用户对此类功能的使用率。
通过引入 View 转换，我们消除了负责管理不同状态下的动画的重复 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; } 使用 ViewTransition API 时的注意事项
在同一页面上使用多个视图转换效果时，请确保为每个效果或部分使用不同的 view-transition-name，以免发生冲突。
当视图转换处于活动状态（正在转换）时，它会在界面其余部分之上添加一个新层。因此，请避免在悬停时触发转换，因为 mouseLeave 事件将意外触发（当实际光标仍未移动时）。
资源
- 利用 View Transition API 实现流畅而简单的转换
- 说明：适用于 MPA 的视图转换
- 案例研究：借助 View 转换实现流畅导航
- 案例研究：The Web Can Do What!?（Web 竟然可以做到这些！？）| 提供类似应用的导航
- 互操作性提案：在各浏览器中提供 View 转换
- 您想报告 bug 或请求提供新功能吗？我们期待收到您对 SPA 和 MPA 的反馈。
探索本系列中的其他文章，了解电子商务公司如何通过使用新的 CSS 和界面功能（例如滚动驱动型动画、弹出式窗口、容器查询和 has() 选择器）获益。