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

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal
X

转场效果对用户有诸多好处，包括帮助用户保持在上下文中，并减少延迟时间。开发者希望能够在页面之间创建流畅的转换，从而提高用户对其网站的互动度。

不过，启用状态转换非常困难，因为这需要开发者管理两个不同元素的状态。即使是简单的淡入淡出，也涉及两种状态同时出现。这会带来易用性方面的挑战，例如处理传出元素的其他互动。对于辅助设备的用户，在某个时间段内，DOM 中同时存在“之前”和“之后”状态。此外，内容在树中移动的方式在视觉上可能看起来没问题，但很容易导致读取位置和焦点丢失。

View Transitions API 在 Chrome 111 中发布，可让您在页面之间创建简单流畅的转换效果。通过它，您在更改 DOM 时不会出现状态之间的重叠，并且可以使用快照视图在状态之间添加过渡动画。

您可能想知道，实现起来有多容易？有哪些类型的用例？其他开发者如何使用视图过渡？

本文将向您介绍 4 个不同网站（RedBus [旅游]、CyberAgent [新闻/博客发布商]、Nykaa [电子商务] 和 PolicyBazaar [保险]）中 View Transitions API 的实现方式，以及这些网站如何通过使用 View Transitions API 获得不同方面的益处。

redBus

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

Redbus 为何实现视图转换？

redBus 团队坚信，应提供统一的、类似应用的 Web 体验，该体验应尽可能接近其原生应用。事实上，他们多年来已实施了多个定制解决方案。例如，他们在 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 Transitions API 的支持后，他们很高兴能够使用该 API 创建富有吸引力的页面转换效果，从而克服这些挑战。

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

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

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

实现的技术细节

CyberAgent 使用 Next.js 构建其 SPA。以下代码示例演示了它们如何使用 ViewTransition 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-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 Transitions API 的另一个有趣之处在于，他们使用了快捷链接在详情页面上轻松实现了预渲染规则。下面是其示例代码：

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 在其大部分代码库中占据主导地位。以下是 PolicyBazaar 首席前端开发者 Aman Soni 分享的他们使用 Angular 编写的代码的 VT 摘录：

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');
  }

赞誉

该公司的设计主管（Life BU）Rishabh Mehrotra 表示，视图转换在提升易用性、互动度和整体满意度方面发挥了重要作用，从而为用户提升了网站体验。这有助于提供流畅的导航、引导式互动、降低认知负担、现代美学等。

提升 Web 体验是 PB 的首要目标，而 VT 已被证明是一款能够出色地实现这一目标的工具。它在开发者社区和用户群体中的广泛吸引力，让我们团队充满了热情。我们正在考虑在各种 POD 中集成该功能，预计这将对满意度和卓越运营产生深远的积极影响。

Saurabh Tiwari，PolicyBazaar 首席技术官

后续步骤

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