查看轉換用個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

檢視畫面轉場是指網頁或應用程式 UI 不同狀態之間的動畫和無縫轉場效果。View Transition API 的設計目的，是讓您以更直覺且效能更高的全新方式建立這些效果。這個 API 相較於先前的 JavaScript 方法，有許多優點，包括：

  • 改善使用者體驗：透過流暢的轉場效果和視覺提示，引導使用者體驗 UI 變更，讓導覽過程更自然，減少突兀感。
  • 視覺連貫性：維持檢視畫面之間的連貫性，可減少認知負擔，並協助使用者在應用程式中保持方向感。
  • 效能：API 會盡可能減少主執行緒資源的使用量，以便建立流暢的動畫。
  • 現代美學：改善過渡效果，提供精緻且引人入勝的使用者體驗。

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：不支援。
  • Safari：18 歲。

資料來源

這篇文章是一系列文章的一部分，討論電子商務公司如何使用新的 CSS 和 UI 功能改善網站。本文將說明部分公司如何導入 View Transition API，並從中獲得實質效益。

redBus

redBus 一向致力於盡可能在原生和網頁體驗之間創造一致性。在 View Transition API 推出之前，在網頁素材資源上實作這些動畫相當困難。不過，我們發現透過 API 在多個使用者歷程中建立轉場效果，能讓網頁體驗更像應用程式，使用者也能更直覺地操作。這些優點加上效能優勢，讓這項功能成為所有網站的必備功能。Amit Kumar，redBus 資深工程管理員。

開發團隊已在多個位置實作檢視畫面轉場效果。以下是主畫面上登入圖示的淡入和滑入動畫組合示例。

當使用者按下 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 後，我們立即獲得更美觀的淡出淡入轉場效果，且不必使用任何效果。Andy Wihalim，Tokopedia 資深軟體工程師。

之前

使用後

程式碼

以下程式碼使用 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 的投資部門在「Why Buy」等說明提示元素中使用了 View Transition API，讓這些元素更具視覺吸引力，並提升這類功能的使用率。

透過整合 View Transitions，我們已移除負責管理不同狀態下動畫的 CSS 和 JavaScript 重複程式碼。這項做法可節省開發工作量，並大幅提升使用者體驗。—Aman Soni，Policybazaar 技術主管。

查看投資產品資訊頁面上「為何要從 Policybazaar 購買」的 CTA 按鈕上的轉場動畫。

程式碼

以下程式碼與前述範例相似。請注意，您可以覆寫 ::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 時的注意事項

在同一頁面上使用多個檢視畫面轉場效果時，請務必為每個效果或部分使用不同的檢視畫面轉場名稱，以免發生衝突。

當檢視畫面轉場處於啟用狀態 (轉場) 時，會在其他 UI 頂端新增新層。因此，請避免在游標懸停時觸發轉場效果，因為 mouseLeave 事件會在實際游標尚未移動時意外觸發。

資源

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