腳趾浸入視圖過渡

坦白說，View Transition API 讓我有點望而生畏。許多教程都展示了令人印象深刻的演示，說明我們如何為兩個頁面之間的轉換製作動畫，它們通常從最簡單的示例開始：

@view-transition {
  navigation: auto;
}

但這通常也是簡單部分的結束，教程隨後會深入到 JavaScript 領域。當然，這沒什麼問題，只是對於像我這樣通過循序漸進學習的人來說，這是一個巨大的飛躍。因此，當我看到 Uncle Dave 和 Jim Neilsen 分享關於一個非常實用的轉換技巧（文章標題）時，我深受啟發。

您可以在 Jim 的網站上看到它是如何工作的：

這正是我喜歡嘗試新事物的那種完美的“淺嚐輒止”實驗。它從相同的 @view-transition 代碼片段開始，該片段用於將兩個頁面都加入 View Transitions API：當前頁面和要導航到的頁面。從這裡開始，我們可以將它們分別視為“新”頁面和“舊”頁面。

我也在我的個人博客上實現了相同的效果：

對於博客來說，這是一個完美的練習，對吧？它首先在我們要參與轉換的元素上設置 view-transition-name，在本例中是“舊”頁面上的文章標題和“新”頁面上的文章標題。

因此，如果我們的標記如下：

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

……我們可以在 CSS 中為它們賦予相同的 view-transition-name：

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

Dave 很快指出，我們可以確保尊重那些偏好減少運動的用戶，並且只有在他們的系統偏好允許運動的情況下才應用此設置：

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

如果頁面上只有這兩個元素，那麼這將正常工作。但是我們有一個文章鏈接列表，所有這些鏈接都必須有自己唯一的 view-transition-name。這就是 Jim 在他的工作中遇到一些困難的地方，因為當不斷發布新的博客文章時，你到底該如何做到這一點？每次想要發布新內容時，你都必須編輯你的 CSS 並想出一個新的轉換名稱嗎？不，一定有更好的方法。

確實有。或者，至少將來會有。它只是還不是標準的。事實上，Bramus 最近在討論 Chrome 對 attr() 函數的工作時寫到了這一點，該函數將能夠在一個聲明中生成一系列唯一的標識符。看看未來的這段 CSS：

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
  view-transition-class: card;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div></custom-ident>

太棒了！我現在就想用它！可惜不僅要等待 Chrome 開發它，還要等待其他瀏覽器採用和實現它，所以誰知道我們什麼時候才能真正得到它。目前，最好的辦法是直接在模板中使用一些編程邏輯。我的網站運行在 WordPress 上，因此我可以訪問 PHP 並生成一個內聯樣式，在兩個元素上設置 view-transition-name。

文章標題在我的單個博客文章的模板中。在 WordPress 行話中，那是 single.php 文件。

@view-transition {
  navigation: auto;
}

文章鏈接位於文章存檔的模板中。在 WordPress 中，這通常是 archive.php：

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

看到那裡發生了什麼嗎？ view-transition-name 屬性直接在內聯上設置在兩個轉換元素上，使用 PHP 根據 WordPress 中文章的分配 ID 生成名稱。另一種方法是在模板中添加一個 <style></style> 標籤並將邏輯放在那裡。與將來 attr() 能夠實現的功能相比，這兩種方法都同樣笨拙，所以選擇你喜歡的吧。

重要的是，現在這兩個元素共享相同的 view-transition-name，並且我們已經加入了 @view-transition。有了這兩個要素，轉換就能工作了！我們甚至不需要定義 @keyframes（但你完全可以），因為默認轉換完成了所有繁重的工作。

本著同樣的“淺嚐輒止”精神，我看到了最新一期的《Modern Web Weekly》，我喜歡在單選按鈕上使用這個小小的 View Transition：

請注意，需要使用 JavaScript 來阻止單選按鈕的默認點擊行為，以便在選中輸入之前允許轉換運行。

以上是腳趾浸入視圖過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！