查看转换案例研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

视图过渡是指网页或应用界面不同状态之间的动画无缝过渡。视图转换 API 旨在让您以比以往更直接、更高效的方式创建这些效果。与之前的 JavaScript 方法相比，该 API 具有多项优势，包括：

  • 改善用户体验：顺畅的过渡和视觉提示可引导用户了解界面变化，让导航体验更加自然流畅。
  • 视觉连贯性：保持视图之间的连贯性可减轻认知负荷，并帮助用户在应用中保持方向感。
  • 性能：该 API 会尽可能少地使用主线程资源，从而实现更流畅的动画。
  • 现代美学：改进后的过渡效果有助于打造精致且富有吸引力的用户体验。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

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

redBus

redBus 一直在努力尽可能地让其原生应用和网站体验保持一致。在 View Transition 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 Transitions API，使其在视觉上更具吸引力，并提高了此类功能的使用率。

通过纳入视图过渡，我们消除了负责管理各种状态下动画的重复 CSS 和 JavaScript 代码。这节省了开发工作量，并显著提升了用户体验。—Aman Soni，Policybazaar 技术主管。

在投资商品详情页上查看“为何选择 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;
}

使用视图转换 API 时需要考虑的事项

在同一网页上使用多个视图过渡效果时，请确保每个效果或部分都有不同的 view-transition-name，以防止发生冲突。

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

资源

不妨浏览本系列中的其他文章，了解电子商务公司如何受益于新的 CSS 和界面功能，例如滚动驱动的动画、弹出式窗口、容器查询和 has() 选择器。