CSS視圖過渡入門指南：讓多頁面應用擁有絲滑動畫詳情 - CSS,視圖過渡,前端開發,辦公效率,yyds乾貨盤點 qife122 博客

CSS視圖過渡入門指南

想象一下，你的網站可以在頁面之間流暢地動畫過渡 - 比如從index.html跳轉到about.html - 而不會出現令人不適的重新加載。由於現代瀏覽器對視圖過渡API的支持，這現在已經成為可能。

視圖過渡曾經是單頁面應用(SPA)的專屬功能。在本文中，我們將探索視圖過渡如何為多頁面應用(MPA)帶來流暢的動畫導航。

MPAs與SPAs快速回顧

多頁面應用(MPA)和單頁面應用(SPA)是Web開發的兩種常見方法，各有優缺點。

MPA為每次導航從服務器加載新頁面，導致完整的頁面重新加載。對於具有許多不同頁面的大型應用，MPA構建更簡單。

另一方面，SPA加載單個HTML頁面，並通過JavaScript動態更新其內容，提供更快的交互和更流暢的用户體驗，但通常需要更復雜的客户端路由和狀態管理。

長期以來，流暢的動畫過渡僅在SPA中可能實現。通過視圖過渡API - 以及現在的CSS @view-transition規則 - MPA現在可以實現類似的效果。CSS視圖過渡設計時考慮了漸進增強。因此，如果瀏覽器不支持它們，網站仍然可以正常工作，因為CSS被視為提示，僅在支持時應用。

視圖過渡的瀏覽器支持

在我們深入瞭解如何使用此功能之前，值得注意的是目前支持視圖過渡的地方。CSS視圖過渡規範有兩個級別：

級別1使用視圖過渡API在單個頁面內啓用過渡。這已經在Chrome、Edge和Safari中得到支持。Firefox支持在版本144中可用（目前處於測試階段）。
- 級別2通過@view-transition規則允許跨多個頁面的過渡。目前支持Chrome 126+、Edge 126+和Safari 18.2+。在撰寫本文時，級別2在Firefox中仍在進行中，但預計將來會支持。在沒有視圖過渡支持的瀏覽器中，網站將繼續使用標準頁面導航正常工作，因為過渡被視為漸進增強，不會破壞您的網站。

創建第一個視圖過渡

讓我們深入看看視圖過渡的實際效果。

作為最簡單的示例，您可以通過向代碼中添加幾行CSS來啓用過渡：

@view-transition {
  navigation: auto;
}

就是這樣！基本版本只有幾行CSS，如果您問我，這真是令人難以置信。

為了看到這行代碼的效果，讓我們構建兩個演示頁面。您也可以嘗試將此代碼添加到任何現有的多頁面應用程序中。

第一個頁面index.html只包含一個標題、幾個段落和指向第二個頁面的鏈接：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="index">
  Welcome to my site
  <p>This is the home page.</p>
  <a rel="nofollow" href="hobbies.html">Check out my hobbies</a>
</body>
</html>

讓我們準備好第二個頁面hobbies.html。這也是一個簡單的頁面，包含一個標題、兩個短段落和返回第一個頁面的鏈接：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Hobbies</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="hobbies">
  My Hobbies
  <p>I enjoy reading and coding.</p>
  <p>On weekends, I like to go hiking.</p>
  <a rel="nofollow" href="index.html">Back to home</a>
</body>
</html>

最後，將以下配方添加到您的style.css文件中：

body {
  font-family: system-ui;
  max-inline-size: 400px;
  padding: 20px;
  text-align: center;
  margin: auto;
  box-sizing: border-box;
  line-height: 1.5;

  &.index {
    background-color: oklch(0.9529 0.0444 332);
  }

  &.hobbies {
    background-color: oklch(0.9588 0.0617 184.24);
  }
}

a {
  color: oklch(0.0867 0.0419 261.53);
}

這就是創建視圖過渡所需的一切。只需這一行CSS，您將看到兩個頁面之間的無縫過渡。過去，這種平滑過渡僅在使用JavaScript的SPA中可能實現。使用CSS @view-transition規則，瀏覽器現在可以原生處理多頁面應用程序中的過渡，而無需JavaScript。

超越默認過渡

現在讓我們更進一步，自定義視圖過渡。在這裏，我們將創建一個滑入和滑出效果，這是一個簡單的動畫，用於理解視圖過渡在底層的工作原理。

讓我們為兩個HTML頁面添加兩個不同的樣式表。將此添加到index.html：

<link rel="stylesheet" href="index.css">

...並將此添加到hobbies.html：

<link rel="stylesheet" href="hobbies.css">

是時候熟悉一些控制視圖過渡的CSS選擇器（偽元素）了：

::view-transition-old - 表示舊頁面的偽元素
- ::view-transition-new - 表示新頁面的偽元素讓我們瞭解這些偽元素如何工作：::view-transition-old和::view-transition-new偽元素分別引用舊頁面和新頁面，允許我們在它們之間設置過渡樣式。當我們從index.html導航到hobbies.html時，舊頁面是我們來自的頁面（index.html），新頁面是我們前往的頁面（hobbies.html）。

讓我們添加一個滑動動畫，使hobbies.html以平滑的滑動效果進入。我們將此動畫稱為slide-from-right。將以下代碼添加到hobbies.css：

@view-transition {
  navigation: auto;
}

::view-transition-new(root) {
  animation: none;
  animation-name: slide-from-right;
}

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

注意：默認情況下，瀏覽器的視圖過渡動畫通過在舊頁面和新頁面之間動畫化它們的不透明度並應用mix-blend-mode: plus-lighter來創建交叉淡入淡出效果。

在此示例中，我們清除了瀏覽器的默認動畫（animation: none）並用slide-from-right動畫替換了它。如果保留默認的交叉淡入淡出，您可以嘗試不同的mix-blend-mode值以查看各種過渡效果。

這是滑入效果的樣子：

![滑入效果演示]

現在讓我們通過添加另一個滑動動畫來完成此效果，以確保hobbies.html頁面以相同的方式滑出。在這種情況下，我們將從hobbies.html導航到index.html；因此，hobbies.html現在是我們的舊頁面，index.html是新頁面。

我們將此動畫稱為slide-to-right。將此代碼添加到index.css：

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: none;
  animation-name: slide-to-right;
}

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

注意我只在兩個方向上都動畫化了hobbies.html，而沒有為index.html添加任何動畫。如果您喜歡，可以同時動畫化兩者。

這是過渡最終的樣子，包括hobbies.html的滑入和滑出效果：

![完整過渡效果演示]

查看演示頁面以在瀏覽器中查看結果。如果您想擴展此演示，請隨意使用mdn/dom-examples存儲庫中的代碼，併為index.html頁面添加動畫（在index.css文件中查找animation: none）。

我很高興看到您想出的所有酷炫的視圖過渡。

總結

您可以在MDN的Mastodon上觀看我關於此主題的演講視頻。

愉快的視圖過渡！願您的多頁面應用在頁面之間輕鬆流暢地切換。更多精彩內容請關注我的個人公眾號公眾號（辦公AI智能小助手）對安全感興趣的朋友可以關注我的安全公眾號（網絡安全技術點滴分享）

qife122 博客

qife122 博客

博客 / 詳情