薩利赫·穆巴沙爾撰寫??

直到最近，只有有限數(shù)量的 CSS 屬性可以進行動畫處理。例如，要創(chuàng)建淡入或淡出效果，通常會使用 opacity 屬性而不是 display 屬性，因為后者無法設置動畫。然而，問題是，雖然該元素在視覺上變得隱藏，但它仍然存在于頁面上。

最近，Chrome 推出了新功能來解決此問題并使開發(fā)過程變得更加簡單。在本文中，我們將比較顯示和大小屬性動畫的傳統(tǒng)方法與這些新功能。

動畫顯示和元素大小的問題

有可能，您必須在某些時候使用 CSS 在某些元素上創(chuàng)建淡入/淡出效果。首選方法是將動畫或過渡應用到元素的不透明度。但將不透明度設置為零實際上并不會刪除該元素 - 它只是使其不可見。大多數(shù)時候，這就足夠了。

但是假設您有一個待辦事項列表，用戶可以在其中刪除項目。如果要創(chuàng)建退出動畫以使項目淡出，通常會使用不透明度。但如果列表需要調(diào)整其高度，您還需要將顯示設置為無。這里的問題是，雖然該項目在視覺上消失了，但它仍然占用 DOM 中的空間，并擾亂布局和用戶交互等內(nèi)容。

這是兩種方法的并排比較：一種僅使用不透明度，另一種將不透明度與顯示相結(jié)合。您可以嘗試下面的示例來查看差異：

查看 CodePen 上 Saleh-Mubahar (@saleh-mubahar) 的 Pen Simple Todo 應用程序比較。

請注意，將顯示與不透明度結(jié)合使用時布局如何變化，而單獨使用不透明度會在列表中留下間隙。雖然第二種方法（不透明顯示）解決了布局問題，但它會干擾平滑的淡出效果，因為在淡入淡出完成之前應用了 display: none。這會導致突然消失而不是逐漸褪色。

例如，不透明度屬性可以從 0 平滑過渡到 1。但是，顯示屬性無法進行動畫處理，因為它沒有數(shù)字范圍 - 它的狀態(tài)是二進制的，例如無、塊或其他值。由于沒有中間值，CSS 無法為顯示設置動畫。

同樣，開發(fā)人員在嘗試對元素的固有大?。ɡ?height: auto）進行動畫處理時經(jīng)常面臨挑戰(zhàn)。這通常用于可折疊部分（如手風琴）上的過渡，其中高度在關(guān)閉時從 0px 開始，并在打開時擴展以適應內(nèi)容。雖然尺寸屬性（如高度）通?？梢赃M行動畫處理（因為它們具有數(shù)字起始值和結(jié)束值），但自動設置動畫或從自動設置動畫會產(chǎn)生問題。瀏覽器無法計算0px和auto之間的步長；因此必須使用復雜的解決方法。

動畫顯示和尺寸的傳統(tǒng)解決方案

有多種方法可以解決動畫顯示和元素大小的挑戰(zhàn)。在本節(jié)中，我們將討論使用 CSS 和 JavaScript 的最流行的解決方案。

基于 CSS 的解決方案

有幾種方法可以解決使用 CSS 無法設置動畫的顯示屬性的問題。最可靠的方法是使用不透明度以及尺寸屬性（例如高度或?qū)挾龋?。在這種情況下，size 屬性用于有效地從 DOM 中刪除元素。這可以使用轉(zhuǎn)換延遲屬性來完成?；旧?，我們?yōu)槌叽邕^渡添加延遲，該延遲等于為不透明度過渡設置的時間。一旦元素淡出，其大小立即設置為零，有效地將其從布局中刪除，就好像未應用 display: none 一樣。

再次使用待辦事項列表作為示例，實現(xiàn)看起來有點像這樣：

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

這里的技巧是，一旦不透明度褪色到 0，延遲后將高度和填充設置為 0。不透明度的延遲和長度需要相同 - 在本例中為 400 毫秒。 height: 0 確保列表項不與布局交互。如前所述，height: auto 根據(jù)內(nèi)容動態(tài)調(diào)整；因此，它不能被動畫化。因此，您需要確保元素具有特定的固定高度，以使動畫正常工作。

將可見性設置為隱藏是另一種常用的方法。但是，這不會從 DOM 中刪除該元素，它仍然會像平常一樣影響布局，即它會影響周圍元素的位置。

將元素動畫化為其固有尺寸（或高度：自動）的最常見 CSS 解決方案是使用 max-height 而不是 height。這不是最簡潔的實現(xiàn)，但它可以完成工作。基本上，您將 max-height 設置為大于元素所能獲得的值。這樣，它就可以模仿平滑過渡，類似于固定高度的動畫：

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

這種方法最明顯的缺點是您必須確保最大高度始終大于元素內(nèi)的實際內(nèi)容。另一個問題是，除非內(nèi)容高度與最大高度值完全匹配，否則過渡時間可能會感覺不準確。

假設您的內(nèi)容高 400 像素，但您將最大高度設置為 1000 像素。從技術(shù)上講，動畫將在整個持續(xù)時間內(nèi)持續(xù)（假設兩秒）。但從視覺上看，元素一旦達到內(nèi)容的實際高度（400px）就會停止增長，而 max-height 不斷過渡到 1000px。因此，在這種情況下，過渡持續(xù)時間將比您指定的時間短。

JavaScript 方法

上面討論的所有 CSS 解決方案都非常復雜，并且可能會導致不可預測的結(jié)果。直到最近，實現(xiàn)這一目標的最可靠方法還是通過 JavaScript。

要在不透明度轉(zhuǎn)換后應用不顯示，我們可以使用 setInterval 或 setTimeout 函數(shù)來添加與不透明度轉(zhuǎn)換持續(xù)時間匹配的延遲。在此延遲之后，您可以將顯示設置為無。這是一個例子：

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

在此代碼中，單擊按鈕后，元素會在一秒鐘內(nèi)淡出，然后其顯示立即設置為無 - 實質(zhì)上是將其從布局中刪除。

類似地，為了對內(nèi)在尺寸進行動畫處理，我們可以在 JavaScript 中計算元素的高度，并使用該值作為高度的端點。這種方法更加可靠和精確。但是，請記住，我們?nèi)栽诟叨葘傩陨显O置動畫。

這里明顯的好處是，您可以根據(jù)元素的實際內(nèi)容動態(tài)設置高度，確保過渡與真實高度匹配，而不是用 max-height 進行猜測。

具體操作方法如下：

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

在此示例中，我們擴展了一個以 0 高度開始的部分。我們使用scrollHeight 來獲取內(nèi)容的完整高度，并將其用作過渡的端點。轉(zhuǎn)換完成后，我們將高度切換為自動，這允許瀏覽器根據(jù)容器的內(nèi)容自動調(diào)整容器的高度。此步驟是可選的，但如果您希望容器內(nèi)的內(nèi)容隨著時間的推移而變化，它會很有用。

用于動畫顯示和固有尺寸屬性的新 CSS 功能

現(xiàn)在讓我們看看最近發(fā)布或即將發(fā)布到瀏覽器的 CSS 新功能。這些新工具消除了我們之前討論的場景中對 JavaScript 的需求，并幫助您編寫更清晰、更短的 CSS。

顯示和關(guān)鍵幀

@keyframes at 規(guī)則允許您通過控制動畫序列中的中間步驟來創(chuàng)建動畫。最新更新允許您在關(guān)鍵幀時間軸內(nèi)對顯示和內(nèi)容可見性屬性進行動畫處理。

我們并沒有完全在 display none 和 block 之間進行插值（因為這是不可能的）。相反，我們等待所有其他效果完成，然后切換顯示狀態(tài)。這與我們對 JavaScript 所做的類似 - 在應用 display: none 之前等待轉(zhuǎn)換完成 - 但現(xiàn)在使用 CSS 更容易。

Chrome 開發(fā)博客有一個非常酷的演示，讓事情變得清晰：

觀看筆淡出卡片 - CodePen 上 web.dev (@web-dot-dev) 的動畫。

首先，在 250 毫秒內(nèi)將不透明度設置為 0。此序列完成后，顯示立即設置為無：

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

這里最大的好處是涉及顯示屬性的更復雜的動畫，直到最近使用 CSS（或 JavaScript）實現(xiàn)起來都非常困難，現(xiàn)在可以相對輕松地創(chuàng)建。

轉(zhuǎn)換行為如何簡化顯示轉(zhuǎn)換

現(xiàn)在還可以使用新的 [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) 屬性通過過渡來創(chuàng)建淡出效果。這使您可以將過渡應用于具有離散動畫行為的屬性，例如顯示。通過使用allow-discrete，您可以為顯示屬性設置動畫。這是一個簡單的例子：

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

使用 @starting-style 的進入動畫

我們在本文中廣泛討論了淡出效果。但相反的情況又如何呢？進入動畫很棘手，通常只能通過 JavaScript 實現(xiàn)。新的 @starting-style at-rule 讓事情變得更加容易。

顧名思義，我們可以使用它來將樣式應用于元素，瀏覽器可以在元素在頁面上可見之前查找該樣式。我們可以在這里設置進入動畫的初始狀態(tài)。元素渲染后，它會轉(zhuǎn)換回默認狀態(tài)。

這是一個基本示例：

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

一旦 DOM 加載，卡片就會淡入。您可以將@starting-style用于各種進入動畫。這是 Chrome 開發(fā)團隊的另一個很棒的示例：

_查看 CodePen 上 web.dev (@web-dot-dev) 的筆項目轉(zhuǎn)換。
_

使用 calc-size() 函數(shù)對內(nèi)在尺寸進行動畫處理

最近在 Chrome 129 中引入了類似于 calc() 的 calc-size 函數(shù)。簡單來說，它允許安全可靠地對內(nèi)在大小執(zhí)行數(shù)學運算。目前支持auto、min-content、max-content、fit-content 四個關(guān)鍵字的操作。

這對于將元素動畫化到其固有尺寸或改變其固有尺寸特別有用。 calc-size 允許將當前在 CSS 中指定的任何高度動畫化為零或到/從一個小的固定值。這是一個將可折疊部分從 height: 0 擴展到 auto:
的簡單示例

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

瀏覽器兼容性

這些功能大部分主要是為了增強動畫而不是必需的 DOM 組件，但由于它們相對較新，因此仍然值得檢查瀏覽器兼容性：

• display 屬性在 Chrome 116 和 Opera 102 中是 @keyframe animable 。 Firefox 支持仍在開發(fā)中，Safari 正在努力
• [transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) 屬性首先在 Chrome 117 中發(fā)布。它與除 Firefox 之外的所有主流瀏覽器兼容，F(xiàn)irefox 目前正在開發(fā)中
• [@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) at-rule 是在 Chrome 117 中引入的。除了 Firefox 之外，所有主要瀏覽器都完全支持它尚不支持顯示動畫：無
• calc-size() 是 Chrome 129 中引入的最新功能，目前僅在 Chrome 和 Edge 中支持。不過，其他主流瀏覽器很快就會支持它

結(jié)論

在本文中，我們探討了開發(fā)人員在對 CSS 屬性（如顯示和元素大?。┻M行動畫處理時面臨的挑戰(zhàn)。傳統(tǒng)方法需要使用 CSS 和 JavaScript 進行復雜的解決方法，才能為無法直接設置動畫的屬性實現(xiàn)動畫。

新功能，例如使用關(guān)鍵幀進行動畫顯示、calc-size() 函數(shù)和過渡行為屬性，使這些動畫更容易實現(xiàn)。這些函數(shù)消除了對 JavaScript 的需求，從而允許更簡單的 CSS 動畫。

---

您的前端是否占用了用戶的 CPU？

隨著 Web 前端變得越來越復雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監(jiān)控和跟蹤生產(chǎn)中所有用戶的客戶端 CPU 使用情況、內(nèi)存使用情況等，請嘗試 LogRocket。

LogRocket 就像網(wǎng)絡和移動應用程序的 DVR，記錄網(wǎng)絡應用程序、移動應用程序或網(wǎng)站中發(fā)生的所有情況。您無需猜測問題發(fā)生的原因，而是可以匯總和報告關(guān)鍵前端性能指標、重放用戶會話以及應用程序狀態(tài)、記錄網(wǎng)絡請求并自動顯示所有錯誤。

現(xiàn)代化調(diào)試 Web 和移動應用程序的方式 - 開始免費監(jiān)控。

以上是使用顯示和大小屬性簡化 CSS 動畫的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！