通过视图转换实现无缝导航

过渡对用户有诸多好处，包括有助于保持过渡氛围，并减少对延迟的感知。开发者希望能够在页面之间创建无缝切换，从而提高用户与网站的互动度。

但是，实现状态转换非常困难，因为需要开发者管理两个不同元素的状态。即使是像简单的淡入淡出之类的内容，也要求两种状态同时存在。这就带来了易用性方面的挑战，例如处理传出元素上的其他交互。对于辅助设备的用户，在一段时间内，之前和之后状态会同时在 DOM 中。此外，事物在树周围移动时呈现效果可能没有问题，但很容易造成阅读位置和焦点丢失。

View Transitions API 在 Chrome 111 中推出，可让用户在页面之间创建流畅简单的过渡。利用它，您可以在不重叠状态的情况下进行 DOM 更改，还可以使用快照视图在状态之间添加过渡动画。

你可能会问，实现起来有多容易？有哪些应用场景？其他开发者如何使用视图转换？

本文介绍了如何在 4 个不同的网站上实现视图过渡：RedBus（旅游）、CyberAgent（新闻/博客发布商）、Nykaa（电子商务）和 PolicyBazaar（保险），以及他们的网站如何使用 View Transitions API 以不同的方式受益。

redBus

redBus 隶属于 MakeMyTrip 集团，是一家巴士预订和票务网站，总部位于印度班加罗尔，业务遍及全球。它是首批实现 View Transitions API 体验的网站之一。

Redbus 为何实现视图转换？

redBus 的团队坚定地坚信，该团队致力于提供一种尽可能接近其原生应用的统一、类应用的网络体验。事实上，他们多年来实施了多种定制解决方案。例如，甚至在开发 View Transitions API 之前，他们就已经为页面过渡推出了基于 JavaScript 和 CSS 的自定义动画。不过，这意味着他们不得不处理较低的网络和设备细分中的性能管理，有时会导致在采用自适应加载策略时产生差异化体验。

redBus 针对多个用户体验历程使用了视图过渡。例如，他们的移动应用内的自助版块（通过自定义 Chrome 标签页打开网页）和公交车票预订漏斗（用户从商品目录页面页面前往付款页面）中会包含这些信息。在后一种情况中，视图转换使网页间的导航更加顺畅，从而增加了网页的转化率。这是由于在执行繁重操作（例如获取最新的可用广告资源）的同时，用户体验得到了提升，感知性能也更好。

实现的技术详情

redBus 使用 React 和 EJS 作为前端技术栈，并在不同的旅程中组合使用 SPA 和 MPA。以下代码段展示了如何使用视图转换：

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

在以下 CSS 中，slide-to-right、slide-to-left、slide-from-right 和 slide-from-left 是 CSS 动画关键帧。

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

业务影响

redBus 选择在其网站上同时实施视图转换以及 INP 改进措施，从而使 销售额提高了 7%。redBus 高级工程经理 Amit Kumar 表示，视图过渡对于真正希望改善用户体验并减少维护开销的用户来说非常棒。

我们召开了全面的用户反馈会议，其中汇总了各种用户的宝贵见解。我们对用户群（公交车和铁路运输）及其需求有深入了解，并结合了专业知识，因此我们相信该功能从一开始就能提供可观的价值，而无需进行 A/B 测试。视图过渡是朝着提供顺畅的导航体验在应用和网站之间架起桥梁的一步。

Anoop Menon，redBus 首席技术官

CyberAgent

CyberAgent 是一家总部位于日本的 IT 公司，提供博客和新闻发布等许多在线服务。

CyberAgent 为何实现视图转换？

CyberAgent 过去考虑过使用 CSS 动画或使用框架来实现动画过渡，以改善用户体验，但他们担心渲染 DOM 和代码的可维护性不佳。当 Chrome 添加对 View 过渡 API 的支持后，他们很高兴使用它来创建引人入胜的网页过渡效果，从而克服了这些挑战。

CyberAgent 在博客列表和博客页面之间实现了视图转换。在这里，请注意他们是如何为主打图片添加元素过渡效果的。您可以访问他们的网站，立即体验。

他们还使用媒体查询为不同的设备设计了不同的动画体验。对于移动版网页，他们添加了元素过渡，而对于桌面设备，这种效果的移动过多。

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

实现的技术详情

CyberAgent 使用 Next.js 构建 SPA。以下代码示例演示了如何使用 View Transition API。

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

查看更多 Next.js 代码示例。

使用预渲染技术查看 MPA 的转换效果

CyberAgent 还在新闻门户网站 Ameba News 的服务上试用了我们新的适用于多页面应用 (MPA) 的 View Transitions API (MPA)（目前标记为 chrome://flags/#view-transition-on-navigation）。

视图过渡的用处有两个：第一个是更改新闻类别，如以下视频所示。

第二个元素位于新闻精彩集锦页面之间，其中会显示内容摘录；当用户点击查看更多详情时，报道的其余部分将淡入。

有趣的是，他们仅向点击按钮后会发生变化的部分添加动画。对动画设计做出的这种细微调整使得 MPA 页面从用户的角度来看看起来更像 SPA，只有新内容在下列位置以动画形式呈现：

具体如下所示：他们为网页的不同部分分配了不同的 view-transition-name。例如，他们为文章的顶部分配view-transition-name一个，在底部分配另一个，且在顶部未添加动画。

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

CyberAgent 使用 View Transition API 的另一个有趣之处在于，他们使用 quicklink 轻松在详情页面中实现预渲染规则。下面是它们的示例代码：

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

如需详细了解其快速链接实现，请参阅这篇文章。

赞誉

CyberAgent 的 Ameba 服务技术主管 Kazunari Hara 表示，视图转换可能会对业务产生重大影响，原因有两个。

首先，它们可以引导页面用户。视图过渡可让用户在视觉上专注于最重要的消息，并帮助他们充分利用网页。此外，它们还使用动画增强和强调品牌。CyberAgent 采用指定的动画设计来宣传其品牌。通过视图转换，他们能够实现这种品牌体验，而不会增加维护外部库的成本。

视图过渡是我最喜欢的 API 之一。与依赖库的其他解决方案相比，将动画添加为标准浏览器功能可使视图转换更易于实现和维护。我们期待实现视图转换，以向更多服务传达我们的品牌。

Kazunari Hara，Ameba 首席技术官

恩卡

Nykaa 是印度最大的时尚和美容电子商务平台。他们力求提供尽可能接近其原生应用的体验。在此之前，他们在尝试实现过渡动画时，遇到编写复杂的自定义 JavaScript 的难题。这也略微影响了其网站的效果。

Nykaa 为何要实现视图转换？

随着视图过渡的出现，Nykaa 的团队发现了一个机会，即这些过渡可以原生实现，这意味着页面过渡的用户体验可以在不降低性能的情况下显著改善。Nykaa 频繁使用视图过渡方式从商品详情页面过渡到商品详情页面。

实现的技术详情

Nykaa 利用 React 和 Emotion 打造了 SPA。如需查看更多示例代码，了解如何将视图转换与 React 搭配使用，请点击此处。

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

用于侧面抽屉式导航栏动画的 CSS：

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

赞誉

Nykaa 的应用主管 Sunit Jindal 表示，视图过渡的最大好处在于“速度感知”。Nykaa 使用闪烁效果来等待内容从后端加载，但发现显示闪烁效果并不能向用户提供等待内容加载完毕所需的时间。 使用视图转换时，转换本身为用户提供了“有事情即将发生”的感觉，从而减轻了等待的痛苦。

Nykaa 在其网页上采用视图过渡的新用户体验增强后，感到非常兴奋，并且已经准备好在其他网页上实现视图过渡。以下是他们的设计副总裁的话：

我们坚定地承诺，会在所有即将推出的功能中适时实现视图转换。我们已经确定了一些领域，并且相关团队正在积极投资。

Krishna R V，设计副总裁

PolicyBazaar

PolicyBazaar 总部位于古尔冈，是印度最大的保险聚合信息网站与跨国金融技术公司。

PolicyBazaar 为何实现视图转换？

作为一家以网站为先的公司，PolicyBazaar 团队一直致力于在关键用户历程中提供尽可能最佳的用户体验。使用 JavaScript 和 CSS 实现自定义转场效果是一种常见的做法，甚至在 View Transitions API 发布之前就已经成为一种常见做法，因为这可以改善用户体验，打造无缝的导航流程，并提升网站的整体视觉吸引力。

然而，这些自定义实现的代价是偶尔会出现基于性能的延迟、代码维护复杂性以及与所用框架的兼容性欠佳。View Transitions API 提供了一个简单易用的界面和以原生方式带来的性能优势，帮助他们克服了大部分挑战。

PolicyBazaar 在其报价前历程中，对不同元素使用了不同的视图过渡功能，这让潜在买家感到非常兴奋，能够提供购买保单所需的详细信息。

实现的技术详情

他们采用混合框架方法，其中 Angular 和 React 在其大部分代码库中占据了主导地位。以下是他们使用 Angular 编写的代码片段，并由 Aman Soni（PolicyBazaar 的前端前端开发者）分享：

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

赞誉

该公司的设计主管 Rishabh Mehrotra 表示，视图过渡通过提高易用性、互动度和整体满意度，在改善用户网站体验方面发挥了重要作用。它有助于提供流畅的导航、引导式交互、降低认知负荷、实现现代美学等。

提升网络体验是 PB 的首要目标，而 VT 是实现这一目标的重要工具，其非常顺畅。它深受开发者社区和用户群的广泛吸引力，激发了我们的团队热情。在我们考虑将其与各种 POD 进行集成时，我们预计，该解决方案会对满意度和卓越运营带来深远的积极影响。

Saurabh Tiwari（PolicyBazaar 首席技术官）

后续步骤

您是否有兴趣试用视图转换功能？您可以参考以下资源来了解详情：

• 关于视图转换的 developer.chrome.com 文档
• MPA 铺垫消息的视图转换
• 旨在实现跨浏览器视图转换的互操作性提案