此页面由 Cloud Translation API 翻译。

查看转换案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

视图过渡以动画形式呈现，在不同状态之间实现无缝过渡网页或应用界面的位置通过查看 Transition API 旨在与原来相比，你可以用更简单、更高效的方式这是可能的。与之前的 API 相比， JavaScript 方法包括：

改进的用户体验：流畅的过渡和视觉提示可引导用户使导航感觉自然、不突兀。
视觉上的连贯性：确保视图之间的连贯性降低认知负荷，帮助用户在应用内保持专注。
性能：API 尽量减少主线程资源的使用这会创建更流畅的动画。
美观现代：经过改进的转场效果会让画面更加精美打造卓越的用户体验。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

这篇帖子属于某个系列探讨电子商务公司使用新的 CSS 和界面功能改进其网站。在本文中，您将了解了解一些公司如何实现 View Transition API 并使其获益。

redBus

一直以来，redBus 都致力于在原生广告和网络内容之间体验在 View Transition API 之前，实现这些制作动画效果颇具挑战。但有了 API 直观，能够在多个用户体验历程中实现转场，体验更接近应用的体验再加上性能优势，都必须在所有网站上提供。—Amit Kumar，高级工程团队 redBus 经理。

该团队在多个位置实现了视图过渡。下面是一个示例首页上登录图标的淡入和滑入动画的组合页面。

</ph> <ph type="x-smartling-placeholder">

用户点击登录时淡入和滑入视图过渡图标。

代码

此实现使用多个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 展馆投资在“为什么购买”、提高其视觉吸引力，并改进此类功能的使用。

通过采用 View Transitions，我们消除了重复的 CSS 和 JavaScript 用于管理各种状态的动画的代码。已保存并显著改善了用户体验。—Aman Soni，Policybazaar 技术主管。

。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

观看“为何从 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 事件时（当实际光标位于还未移动）。

资源

使用 View Transition API 实现轻松顺畅的转场
解说：MPA 的视图过渡
案例研究：通过视图过渡实现无缝导航
案例研究：Web Can Do What!?|提供类似应用的导航
互操作性建议：让视图过渡效果可在各种浏览器中使用
您想要报告 bug 或请求新功能吗？我们希望听到您的反馈意见 SPA 和 MPA。

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