查看轉換用個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

檢視轉場效果可在網頁或應用程式 UI 的不同狀態之間，產生動畫且順暢的轉場效果。View Transition API 的設計用意是讓您以比過去更直接且有效率的方式建立這些效果。與先前的 JavaScript 方法相比，此 API 有許多優點，包括：

  • 改善使用者體驗：流暢的轉場效果和視覺提示能夠引導使用者變更 UI，讓導覽看起來更自然，不干擾使用者。
  • 視覺連貫性：維持檢視畫面之間的連續性，有助於減少認知負荷，並有助於使用者在應用程式中保持專注。
  • 效能：API 會盡可能減少使用主要執行緒資源，產生更順暢的動畫。
  • 現代美感：轉場效果經過改善，可提升使用者的使用體驗。

瀏覽器支援

  • 111
  • 111
  • x
  • 18

來源

本文是系列文章的一部分，其中會討論電子商務公司如何使用新的 CSS 和 UI 功能改善網站。在本文中，瞭解部分公司如何導入 View Transition API，並從中獲益。

redBus

redBus 一直以來都嘗試盡可能打造一致的原生與網頁體驗。在 View Transition API 之前，將這些動畫套用到我們的網路資產是很有挑戰性的。但透過使用 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 的投資產業運用 View Transition API，在說明「為什麼要購買」等提示元素時使用，使其在視覺上具有吸引力，並改善這類功能的使用情況。

整合 View 轉場功能後，我們不再使用重複的 CSS 和 JavaScript 程式碼來管理不同狀態下的動畫。這樣不僅減少開發工作，也大幅改善了使用者體驗。—Policybazaar 技術主管 Aman Soni

在投資清單頁面上查看「為何要向 Policybazaar 購買」行動號召文字中的轉場動畫。

程式碼

下列程式碼與先前的範例類似。請注意，此功能可以覆寫 ::view-transition-old(root) 和 ::view-transition-new(root) 的預設樣式和動畫。在本例中，預設的 animation-duration 會更新為 0.4s。

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() 選取器) 可帶來哪些好處。