提升使用者體驗：CSS View Transitions API 全面指南

在今日動態多變的網路世界中，使用者體驗（UX）至關重要。無縫的導覽和引人入勝的互動是讓使用者滿意並願意回訪的關鍵。CSS View Transitions API 正是實現此目標的強大工具，這是一個較新的瀏覽器功能，允許開發者在 Web 應用程式的不同狀態或頁面之間，創造流暢且具視覺吸引力的轉場效果。

什麼是 CSS View Transitions API？

CSS View Transitions API 提供了一種標準化的方法，用以製作網頁應用程式在不同狀態間導覽時所發生的視覺變化動畫。您可以把它想像成一種在螢幕內容更新時，協調流暢淡入淡出、滑動和其他視覺效果的方式。在此 API 出現之前，開發者通常依賴 JavaScript 函式庫和複雜的 CSS 動畫來達到類似效果，這不僅 cumbersome，也可能導致效能問題。View Transitions API 提供了一種更精簡、效能更好的方法。

此 API 的核心概念是擷取 DOM（文件物件模型）的「之前」與「之後」狀態，然後為兩者之間的差異製作動畫。瀏覽器會處理創建動畫的繁重工作，讓開發者不必手動編寫複雜的動畫程式碼。這不僅簡化了開發流程，也有助於確保更流暢、效能更高的轉場效果。

為何要使用 CSS View Transitions API？

提升使用者體驗： 流暢的轉場讓導覽感覺更自然、更吸引人，從而帶來更好的整體使用者體驗。想像一下，在一個電子商務網站上，瀏覽不同商品頁面時，看到的是流暢的滑動動畫，而不是突兀的跳轉。這創造了一種連續性和精緻感。
增強感知效能： 即使實際載入時間相同，流暢的轉場也能讓網站感覺更快。視覺回饋讓使用者感覺應用程式反應迅速且高效。想想原生行動應用程式如何經常使用轉場來掩蓋載入時間。
簡化開發： 此 API 簡化了創建複雜動畫的過程，減少了所需的程式碼量，並使其更易於維護。再也不用處理雜亂的 JavaScript 動畫函式庫了！
原生瀏覽器支援： 作為一個原生的瀏覽器功能，View Transitions API 受益於瀏覽器優化，與基於 JavaScript 的解決方案相比，可能帶來更好的效能。瀏覽器可以利用其內部渲染引擎來達到最佳效率。
無障礙性： 精心設計的轉場可以透過提供清晰的視覺提示，說明應用程式如何變化，從而改善無障礙性。有認知障礙的使用者可能會從這些視覺提示中受益，因為這可以幫助他們理解應用程式的流程。然而，確保轉場不會引發動暈症或造成分心至關重要；為某些使用者提供停用選項可能是必要的。

它是如何運作的？

CSS View Transitions API 主要涉及一個 JavaScript 函式：`document.startViewTransition()`。此函式接受一個回呼函式作為參數。在此回呼函式中，您執行代表視圖之間轉換的 DOM 更新。瀏覽器會自動擷取 DOM 的「之前」和「之後」狀態，並創建轉場動畫。

以下是一個簡化的範例：


  function updateContent(newContent) {
    document.startViewTransition(() => {
      // 使用新內容更新 DOM
      document.querySelector('#content').innerHTML = newContent;
    });
  }

讓我們來分解這段程式碼：

`updateContent(newContent)`：此函式將要顯示的新內容作為參數。
`document.startViewTransition(() => { ... });`：這是此 API 的核心。它告訴瀏覽器開始一個視圖轉場。傳遞給 `startViewTransition` 作為參數的函式將被執行。
`document.querySelector('#content').innerHTML = newContent;`：在回呼函式內部，您用新內容更新 DOM。這就是您對頁面進行您想要動畫化的變更的地方。

瀏覽器會處理剩下的部分。它會在 `innerHTML` 更新前後擷取 DOM 的狀態，並在兩種狀態之間創建一個流暢的轉場。

基本實作範例

以下是一個更完整的範例，包含 HTML、CSS 和 JavaScript：

HTML (index.html)：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>View Transitions Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <button data-target="home">首頁</button>
    <button data-target="about">關於</button>
    <button data-target="contact">聯絡我們</button>
  </nav>

  <div id="content">
    <h1>首頁</h1>
    <p>歡迎來到首頁！</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css)：


body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

/* 轉場元素的樣式 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript (script.js)：


const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '<h1>首頁</h1><p>歡迎來到首頁！</p>',
  about: '<h1>關於</h1><p>了解更多關於我們的資訊。</p>',
  contact: '<h1>聯絡我們</h1><p>與我們取得聯繫。</p>',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // 重設滾動位置
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

在此範例中，點擊導覽按鈕會在內容更新時觸發一個淡入淡出轉場。CSS 定義了 `fadeIn` 和 `fadeOut` 動畫，而 JavaScript 則使用 `document.startViewTransition` 來協調轉場。

進階技巧與自訂

CSS View Transitions API 提供了幾種用於自訂轉場的進階功能：

1. 命名轉場

您可以為特定元素指定名稱以創建更具針對性的轉場。例如，您可能希望在頁面之間導覽時，某個特定圖片能夠從一個位置平滑過渡到另一個位置。

HTML：


<img src="image1.jpg" alt="Image 1" style="view-transition-name: hero-image;">

CSS：


::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

這段程式碼為圖片指定了 `hero-image` 的名稱。然後，CSS 針對這個特定的轉場群組來應用自訂動畫。`::view-transition-group()` 偽元素允許您為特定的轉場元素設定樣式。

2. `view-transition-name` 屬性

這個 CSS 屬性允許您為將參與視圖轉場的元素指定一個名稱。當不同頁面上的兩個元素具有相同的 `view-transition-name` 時，瀏覽器會嘗試在它們之間創建一個平滑的過渡。這對於創建共享元素轉場特別有用，在這種轉場中，一個元素看起來像是從一個頁面無縫地移動到另一個頁面。

3. JavaScript 控制

雖然此 API 主要由 CSS 驅動，但您也可以使用 JavaScript 來控制轉場過程。例如，您可以監聽 `view-transition-ready` 事件以在轉場開始前執行操作，或監聽 `view-transition-finished` 事件以在轉場完成後執行程式碼。


document.startViewTransition(() => {
  // 更新 DOM
  return Promise.resolve(); // 可選：返回一個 promise
}).then((transition) => {
  transition.finished.then(() => {
    // 轉場已結束
    console.log('轉場完成！');
  });
});

`transition.finished` 屬性返回一個在轉場完成時解析 (resolve) 的 promise。這允許您在動畫結束後執行操作，例如載入額外內容或更新 UI。

4. 處理非同步操作

在 `document.startViewTransition()` 回呼函式內執行 DOM 更新時，您可以返回一個 Promise，以確保轉場在非同步操作完成之前不會開始。這對於在更新 UI 之前需要從 API 獲取資料的情境非常有用。


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // 使用獲取的資料更新 DOM
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

5. 自訂 CSS 轉場

View Transitions API 的真正威力在於能夠使用 CSS 自訂轉場。您可以使用 CSS 動畫和轉場來創造各種效果，例如淡入淡出、滑動、縮放等等。嘗試使用不同的 CSS 屬性以達到期望的視覺效果。

CSS：


::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

這個範例創建了一個滑動轉場效果。

瀏覽器相容性與 Polyfills

CSS View Transitions API 是一個相對較新的功能，因此瀏覽器支援仍在發展中。截至 2023 年底，Chrome 和 Edge 已有良好支援。Firefox 和 Safari 正在著手實作。在生產環境中使用此 API 之前，檢查當前的瀏覽器相容性並考慮為舊版瀏覽器使用 polyfill 是很重要的。polyfill 是一段 JavaScript 程式碼，它為本身不支援新功能的舊版瀏覽器提供了該功能。

您可以使用像 GitHub 上的這個 polyfill，為尚未原生支援的瀏覽器提供支援。請記得在不同瀏覽器中徹底測試您的應用程式，以確保一致的使用者體驗。

最佳實踐與注意事項

效能： 雖然 View Transitions API 通常效能良好，但避免創建可能影響效能的過於複雜的動畫是很重要的。保持動畫簡單並進行優化以獲得最佳效果。
無障礙性： 請注意可能對動態效果敏感的使用者。如有必要，提供停用轉場的選項。考慮使用 `prefers-reduced-motion` 媒體查詢來偵測使用者是否在其系統設定中要求減少動態效果。
漸進式增強： 將 View Transitions API 作為一種漸進式增強來使用。確保即使瀏覽器不支援此 API，您的應用程式仍能正常運作。
測試： 在不同裝置和瀏覽器上徹底測試您的轉場，以確保一致且流暢的體驗。
後備機制： 為不支援 View Transitions API 的瀏覽器實作後備機制。這可能是一個簡單的淡入效果或一個較不精緻的轉場。
有意義的轉場： 確保您的轉場是有意義的，並對使用者體驗有所貢獻。避免僅僅為了使用而使用轉場；它們應該服務於一個目的，並增強應用程式的流程。

使用案例與範例

CSS View Transitions API 可用於多種情境以增強使用者體驗：

單頁應用程式 (SPAs)： 在 SPA 的不同視圖之間進行平滑過渡，可以使應用程式感覺更具響應性，更像原生應用。
電子商務網站： 在商品頁面、購物車和結帳流程之間進行轉場，可以創造更具吸引力和無縫的購物體驗。例如，將商品圖片從商品頁面平滑過渡到購物車圖示。
圖片庫： 在圖片庫中的圖片之間導覽時，創建具有視覺吸引力的轉場。放大效果或滑動動畫可以增強瀏覽體驗。
儀表板介面： 在儀表板的不同區塊或小工具之間進行轉場，可以提高資訊的清晰度和流暢度。
漸進式網頁應用程式 (PWAs)： 為 PWA 添加類似原生的轉場，使其感覺與使用者的作業系統更加整合。
行動應用程式（使用網頁技術）： 使用 React Native 或 Ionic 等技術構建的混合式行動應用程式，可以利用 View Transitions API 在螢幕之間創建流暢的轉場。
國際化網站： 擁有多語言版本的網站可以在使用者切換語言時，使用轉場來平滑地動畫化內容更新。例如，在段落的英文版和西班牙文版之間進行交叉淡入淡出轉場。在設計轉場時，請記得考慮不同語言的方向性（從左到右 vs. 從右到左）。

全球化考量

在全球可存取的網站中實作 View Transitions API 時，請考慮以下幾點：

語言方向： 轉場應適應語言方向（從左到右或從右到左）。例如，在阿拉伯語或希伯來語中，滑動轉場應從右向左移動。
文化偏好： 請注意有關動態和動畫的文化偏好。某些文化可能會覺得過度的動畫會分散注意力，甚至令人反感。
無障礙性： 確保轉場對身心障礙使用者是無障礙的，包括有視覺障礙或對動態敏感的使用者。提供停用或降低轉場強度的選項。
網路狀況： 考慮到網路連線速度慢或不穩定的使用者。轉場應針對效能進行優化，並且不應顯著增加頁面載入時間。

結論

The CSS View Transitions API 是一個強大的工具，用於提升使用者體驗並創建更具吸引力的網頁應用程式。透過簡化創建流暢且視覺上吸引人的轉場過程，此 API 讓開發者能夠專注於為使用者提供更好的整體體驗。雖然瀏覽器支援仍在發展中，但 View Transitions API 的潛在好處是顯而易見的。隨著此 API 變得更廣泛地被採用，它很可能成為前端開發者工具箱中不可或缺的工具。擁抱這項新技術，將您的網頁應用程式提升到一個新的水平。

透過理解本指南中概述的概念和技巧，您可以開始使用 CSS View Transitions API 來創建更精緻、更具吸引力的網頁應用程式。嘗試不同的轉場，根據您的特定需求進行自訂，並始終將使用者體驗和無障礙性放在首位。View Transitions API 是一個強大的工具，可以幫助您創建兼具視覺吸引力和高度功能性的網頁應用程式。