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

Yuriko Hirota

Saurabh Rajpal

过渡对用户有诸多好处，包括有助于让用户了解相关情境，以及减少对延迟的感觉。开发者希望能够在页面之间实现无缝过渡，从而增加用户与网站的互动。

但是，实现状态转换非常困难，因为它需要开发者管理两个不同元素的状态。即使是简单的淡入淡出，也涉及到两种状态同时出现。这会带来易用性方面的挑战，例如处理传出元素上的额外互动。对于辅助设备的用户来说，在一段时间内，前后的状态会同时位于 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 增加对 Viewtransition API 的支持后，他们非常高兴能够利用该 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（目前位于 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 使用视图转换 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

Nykaa 是印度最大的时尚和美妆电子商务平台。他们致力于提供尽可能接近原生应用体验的移动网络体验。以前，他们在尝试实现过渡动画时，难以编写复杂的自定义 JavaScript。这也对其网站的效果产生了轻微影响。

Nykaa 为何实现视图过渡？

随着视图过渡的推出，Nykaa 的团队发现了一个机会：这些过渡原本就提供，这意味着页面过渡的用户体验可以显著改善，而不会降低性能。Nykaa 大量使用视图过渡，从商品详情页面过渡到商品详情页面。

实现的技术细节

Nykaa 使用 React 和 Emotion 打造 SPA。如需详细了解如何将 View 过渡与 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 团队始终致力于在其关键用户历程中提供最佳用户体验。在 View Transitions API 发布之前，使用 JavaScript 和 CSS 实现自定义转场是一种常见的做法，因为这样可以改善用户体验、打造顺畅的导航流程，并改善网站的整体视觉吸引力。

然而，这些自定义实现的代价是偶尔会出现基于性能的延迟、代码维护复杂性，以及与所用框架的兼容性欠佳。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 铺垫消息的视图过渡
• 关于实现跨浏览器实现视图过渡的互操作性提案