查看視窗外的過渡

CSS 視圖轉換已登陸 Chrome，並且（無論好壞）現在大多數最終用戶都可以廣泛使用。 Safari 也不甘落後，該功能已在 TP 中提供，而 Firefox 至少正在開發中。

我喜歡多頁面轉換的實現變得如此簡單，但同時，我意識到它們的一個大問題：超出視口的元素開始瘋狂地四處飄蕩。

我的部落格用一些 Javascript 來處理這個問題。 IntersectionObserver 在可見時在自訂屬性中設定視圖轉換名稱。只要它不在視線範圍內，該屬性就不會設置，並且不會觸發轉換。它可以工作，但需要 HTML、Javascript 和 CSS 相互依賴。本著讓 CSS 表現更重要的精神，我想要一個更簡單的解決方案。

Chrome 最近推出了另一個可能會有所幫助的功能：滾動驅動的動畫。遺憾的是，這僅在 Chrome 中可用。 Firefox 將其置於標誌後面，而 Safari 則沒有顯示任何活動跡象。但我們可以優雅地回退，要么使用前面提到的 Javascript 解決方案，要么乾脆忽略視口檢測並顯示動畫（在撰寫本文時，Safari 就是這種情況）。

一個簡單的過渡

讓我們把它們放在一起，從視圖轉換本身開始：

現在您將看到 page1.html 中的 div 在導覽時轉換為 page2.html 上的版本。 CSS 中的 @view-transition at-rule 也會對整個文件啟動交叉淡入淡出。過渡持續時間預設為 0.4 秒，但我們可以添加幾行來控制它：

持續時間由--view-transition-duration 設定頂部的@property 規則完全是可選的，但當我們設定--view- 時，它會讓動畫持續時間回落到0.4 秒而不是無效值過渡持續時間：假的。

處理視窗

儘管如此，當頁面轉換時元素位於視口之外時，它仍然會動畫，有時會進入或越過整個可見螢幕，而不指示它來自哪裡或要去哪裡。我覺得這種行為非常惱人。

透過滾動驅動的動畫，我們現在有了一個可以根據滾動和視口相對位置控制樣式的工具。所以我們也可以控制視圖轉換的觸發：

enable-vt 關鍵影格動畫無法從無平滑過渡到具有文字字串的自訂屬性，因此會進行硬剪切。當元素部分進入或離開視窗時，動畫範圍就會觸發。動畫本身將 --enable-view-transition 設定為 0.1% 和 99.9% 以盡快觸發。我想在我們獲得動畫開始或結束位置的提示後立即啟用視圖轉換。

最後 --enable-view-transitions 由捲動驅動動畫設定為無或名為 --view-transition-name 的新自訂屬性。它被設定為螢幕覆蓋率的 0.1% 到 99.9% 之間，禁用視口上方和下方（或左側和右側，無論您想要以哪種方式握住它）的視圖過渡。這個新屬性對於在不同元素上設定單獨的動畫非常有用。每個元素都可以透過為 --view-transition-name 設定唯一值來獲得自己的轉換。

<div>



<p>這需要在來源頁面和目標頁面上完成。如果沒有設定值，則預設為default-view-transition，它統一控制所有剩餘的data-view-transition元素。 </p>

<h2>
  
  
  現實世界的實施
</h2>

<p>我將此實作新增到我的 CSS 樣板 Ssstyles 中。在來源頁面和目標頁面上為元素提供 data-view-transition 屬性將使其在兩者之間進行轉換。給它一個 --view-transition-name 將讓它擁有自己獨特的動畫，獨立於其他類似元素。設定 --view-transition-duration 控制過渡的持續時間。 </p>


          </div>

            
        

以上是查看視窗外的過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！