查看转换案例研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

视图转换是指网页或应用界面的不同状态之间的动画化无缝转换。View Transition API 的设计旨在让您能够以比以往更简单、更高效的方式创建这些效果。与以前的 JavaScript 方法相比，此 API 具有诸多优势，包括：

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

浏览器支持

  • Chrome：111.
  • Edge：111.
  • Firefox：不受支持。
  • Safari：18.

来源

本文是系列文章的一部分，介绍了电子商务公司如何使用新的 CSS 和界面功能改进其网站。在本文中，了解一些公司如何实现 View Transition API 并从中受益。

redBus

redBus 一直致力于在其原生体验和 Web 体验之间建立尽可能多的对等性。在 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;
}

使用 View Transition API 时的注意事项

在同一页面上使用多个视图转换效果时，请确保为每个效果或部分使用不同的 view-transition-name，以免发生冲突。

当视图转换处于活动状态（正在转换）时，它会在界面其余部分之上添加一个新层。因此，请避免在悬停时触发转换，因为 mouseLeave 事件会意外触发（当实际光标尚未移动时）。

资源

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