本頁面由 Cloud Translation API 翻譯而成。

查看轉換用個案研究

Swetha Gopalakrishnan

Saurabh Rajpal

觀看轉場效果可播放不同狀態的動畫，流暢切換用於網頁或應用程式 UI 查看 Transition API 經過精心設計這些功能可讓您以更簡單明瞭且成效的方式產生這些效果可能得以成功API 具備多項與先前版本相較的優點 JavaScript 方法，包括：

改善使用者體驗：流暢的轉場效果和視覺提示引導使用者，讓導覽介面看起來更自然，不突兀。
視覺連貫性：維持檢視畫面之間的連續性減少認知負荷，並協助使用者持續使用應用程式。
效能：API 會嘗試盡可能減少使用主執行緒資源，這樣就能讓動畫更流暢
現代美學：經過改良的轉場效果，有助於打造流暢的引人入勝的使用者體驗

瀏覽器支援

資料來源

這篇文章是系列活動的一部分探討電子商務公司運用新的 CSS 和 UI 功能提升網站品質本文將介紹瞭解部分公司導入 View Transition API 後獲得哪些好處。

redBus

redBus 一直以來都嘗試打造與原生程式碼相得益彰的優質服務為使用者提供更棒的體驗在 View Transition API 之前，實作在網頁素材資源上新增動畫是一大挑戰但有了 API 以符合直覺的方式建立橫跨多個使用者歷程的轉場，打造網路環境提供更類似應用程式的體驗再加上這些優點與效能有關必須為所有網站啟用此功能。— 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 即可與先前的導入程序相比更能提供更良好的淡出轉場效果完全不需任何影響—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 的投資垂直產業在說明提示元素 (例如「購買理由」、讓使用者在視覺上得到吸引力，並改善這類功能的用法。

整合「檢視畫面轉場」功能後，我們剔除重複的 CSS 和 JavaScript 程式碼，負責管理各種狀態的動畫。已儲存並大幅提升了使用者體驗。—Aman Policybazaar 技術主管 Soni。

，瞭解如何調查及移除這項存取權。

觀看「為什麼要從 Policybazaar 購買」的轉場效果動畫CTA 。

程式碼

下列程式碼與先前的範例類似。還有一件事可覆寫 Google Cloud 預設樣式和動畫 ::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 的注意事項

在同一頁使用多種觀看轉場效果時，為每個效果或區段使用不同的視圖轉換名稱，以防止衝突。

如果檢視畫面轉場效果處於有效狀態 (轉換中)，系統會在也就是使用者介面的其餘部分因此，請避免在滑鼠遊標懸停時觸發轉場效果 mouseLeave 事件將意外觸發 (實際遊標是在不動)。

資源

探索本系列的其他文章，瞭解電子商務的運作方式公司在使用全新 CSS 和 UI 功能 (例如捲動式介面) 時獲得良好成效動畫、彈出式視窗、容器查詢和 has() 選取器。