此页面由 Cloud Translation API 翻译。

查看转换案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

视图转换是指网页或应用界面的不同状态之间的动画化无缝转换。View Transition API 经过专门设计，可让您以比以往更直接和更高效的方式来创建这些效果。与以前的 JavaScript 方法相比，此 API 具有诸多优势，包括：

改善了用户体验：流畅的过渡和视觉提示可引导用户完成界面的变化，从而打造自然流畅的导航体验。
视觉连贯性：在视图之间保持连贯性有助于减轻认知负担，并帮助用户在应用中保持正确的方向。
性能：该 API 会尽量少用主线程资源，从而实现更流畅的动画。
现代美观：经过改进的过渡有助于打造更完善且引人入胜的用户体验。

浏览器支持

来源

本文是系列文章中的一篇，该系列讨论了电子商务公司如何使用新的 CSS 和界面功能增强其网站。在本文中，您将了解一些公司如何实现 View Transition API 并使其受益。

redBus

redBus 一直致力于尽可能让原生应用和网站体验保持一致。在 ViewTransition API 之前，在 Web 素材资源上实现这些动画非常困难。不过，我们发现，借助此 API，您可以直观地在多个用户体验历程中创建转场效果，从而让 Web 体验更像应用。所有这些优势再加上性能优势，使其成为所有网站的必备功能。- Amit Kumar，redBus 高级工程经理。

该团队已在多个位置实现了视图转换。下面的示例展示了如何在首页上对登录图标使用淡入和滑入动画组合。

当用户点击 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，使其具有视觉吸引力，并提升了此类功能的使用率。

通过整合视图过渡，我们消除了用于管理不同状态的动画的重复 CSS 和 JavaScript 代码。这节省了开发工作量，并显著提升了用户体验。- Policybazaar 技术主管 Aman Soni。

在投资详情页面上查看“为何从 Policybazaar 购买”CTA 的过渡动画。

代码

以下代码与前面的示例类似。需要注意的是，您可以替换 ::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!?| 提供与应用类似的导航
互操作性提案：在各浏览器中提供 View 转换
您想要报告 bug 或请求新功能吗？我们期待收到您对 SPA 和 MPA 的反馈。

探索本系列中的其他文章，了解电子商务公司如何通过使用新的 CSS 和界面功能（例如滚动驱动型动画、弹出式窗口、容器查询和 has() 选择器）获益。