透過檢視畫面轉場效果，可能有流暢的導覽體驗

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 版本測試。檢視畫面轉場是縮小應用程式和網頁之間差距的一種方式，可提供流暢的導覽體驗。

redBus 技術長 Anoop Menon

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。以下程式碼範例說明如何使用 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 的新聞入口網站上，測試我們全新的 View Transitions API for Multiple Page Apps (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 使用檢視轉場 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 有專屬的動畫設計，用於傳達品牌資訊。有了檢視畫面轉場功能，他們就能實作這項品牌體驗，而且不必額外負擔維護外部程式庫的成本。

View Transitions 是我最喜歡的 API 之一。與依賴程式庫的其他解決方案相比，將動畫設為標準瀏覽器功能，可讓您更輕鬆地實作及維護檢視畫面轉場效果。我們期待將這項功能導入更多服務，以便宣傳我們的品牌。

Ameba 技術長 Kazunari Hara

Nykaa

Nykaa 是印度最大的時尚美妝電子商務平台。他們希望行動版網站體驗盡可能貼近原生應用程式體驗。他們先前嘗試導入轉場動畫時，遇到了編寫複雜自訂 JavaScript 的難題。這也對他們的網站效能造成輕微影響。

Nykaa 為何導入檢視畫面轉場效果？

隨著視圖轉場效果的推出，Nykaa 團隊發現了商機，因為這些轉場效果可原生提供，因此可大幅改善網頁轉場的使用者體驗，且不會影響效能。Nykaa 大量使用檢視轉場效果，從產品詳細資料頁面轉換至產品資訊頁面。

實作技術細節

Nykaa 使用 React 和 Emotion 建構 SPA。如要進一步瞭解如何使用 React 搭配 View 轉場效果，請參閱這篇文章。

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 佔據了大部分程式碼基底。以下是 Aman Soni (PolicyBazaar 的前端開發人員主管) 分享的 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');
  }

客戶感言

設計總監 Rishabh Mehrotra 表示，透過改善可用性、參與度和整體滿意度，檢視轉場可為使用者提供更優質的網站體驗。這有助於提供流暢的導覽、引導式互動、降低認知負擔、現代美學等多項功能。

提升網站體驗是 PB 的首要目標，而 VT 已證明是達成這項目標的絕佳工具，可提供流暢無礙的使用體驗。這款應用程式在開發人員社群和使用者族群中廣受歡迎，也讓我們的團隊充滿熱情。我們正考慮在各 POD 中整合這項功能，預期這將對滿意度和卓越營運帶來深遠的正面影響。

Saurabh Tiwari (PolicyBazaar 技術長)

後續步驟

您想試試觀看轉場效果嗎？以下提供一些資源，供您進一步瞭解相關資訊：

• developer.chrome.com 說明文件：檢視畫面轉場效果
• 查看 MPA 說明影片的轉場效果
• 跨瀏覽器可用檢視畫面轉場的互通性提案