查看轉換用個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

檢視畫面轉場效果是指網頁或應用程式 UI 不同狀態之間的動畫轉場效果，檢視區塊轉換 API 的設計宗旨，是讓您以比以往更簡單且有效的方式建立這些效果。與先前的 JavaScript 方法相比，這項 API 有多項優點，包括：

  • 提升使用者體驗：轉換流程順暢，且視覺提示可引導使用者瞭解 UI 的變化，讓導覽過程自然流暢，減少突兀感。
  • 視覺連續性：在不同檢視畫面之間維持連續性，可減少認知負荷，協助使用者在應用程式中保持方向感。
  • 效能：API 會盡可能減少使用主執行緒資源，讓動畫更流暢。
  • 現代美學：改良的轉場效果可提供精緻且引人入勝的使用者體驗。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

本系列文章將探討電子商務公司如何運用新的 CSS 和 UI 功能，提升網站品質。本文將說明部分公司如何導入 View Transition API，並從中獲益。

redBus

redBus 一直致力於盡可能讓原生和網頁體驗保持一致。在 View Transition API 推出前，我們很難在網頁資源上實作這些動畫。但我們發現，使用 API 就能直覺地在多個使用者歷程中建立轉場效果，讓網頁體驗更像應用程式。這一切加上效能優勢，讓這項功能成為所有網站的必備功能。—redBus 資深工程經理 Amit Kumar。

團隊已在多個位置導入檢視畫面轉場效果。以下範例顯示首頁上的登入圖示，同時使用淡入和滑入動畫。

使用者點選 redBus 首頁上的登入圖示時，淡入並滑入檢視畫面轉換。

程式碼

這項實作方式會使用多個 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，就能立即獲得比先前實作方式更令人愉悅的淡出轉場效果，而且完全不需要任何效果。Tokopedia 資深軟體工程師 Andy Wihalim。

之前

晚於

程式碼

下列程式碼使用 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

Policybazaar 的投資垂直領域已在「購買原因」等說明提示元素上使用 View Transition API，讓這些元素更具視覺吸引力，並提升這類功能的使用率。

我們納入檢視區塊轉換後，就不再需要重複使用 CSS 和 JavaScript 程式碼，管理各種狀態的動畫。這項功能節省了開發工作，並大幅提升使用者體驗。—Policybazaar 技術主管 Aman Soni。

在投資產品資訊頁面，查看「為何選擇 Policybazaar」行動號召的轉場動畫。

程式碼

下列程式碼與先前的範例類似。請注意，您可以覆寫 ::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，以免發生衝突。

在檢視區塊轉換期間 (轉換中)，系統會在其餘 UI 的頂端新增圖層。因此，請避免在懸停時觸發轉場效果，因為 mouseLeave 事件會意外觸發 (實際游標尚未移動時)。

資源

歡迎參閱本系列的其他文章，瞭解電子商務公司如何運用捲動驅動動畫、彈出式視窗、容器查詢和 has() 選擇器等 CSS 和 UI 新功能獲益。