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

直到最近，只有有限數(shù)量的 CSS 屬性可以進(jìn)行動(dòng)畫處理。例如，要建立淡入或淡出效果，通常會(huì)使用 opacity 屬性而不是 display 屬性，因?yàn)獒嵴邿o法設(shè)定動(dòng)畫。然而，問題是，雖然該元素在視覺上變得隱藏，但它仍然存在於頁面上。

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

動(dòng)畫顯示和元素大小的問題

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

但是假設(shè)您有一個(gè)待辦事項(xiàng)列表，用戶可以在其中刪除項(xiàng)目。如果要建立退出動(dòng)畫以使項(xiàng)目淡出，通常會(huì)使用不透明度。但如果清單需要調(diào)整其高度，您還需要將顯示設(shè)為無。這裡的問題是，雖然該項(xiàng)目在視覺上消失了，但它仍然佔(zhàn)用 DOM 中的空間，並擾亂佈局和用戶互動(dòng)等內(nèi)容。

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

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

請(qǐng)注意，將顯示與不透明度結(jié)合使用時(shí)佈局如何變化，而單獨(dú)使用不透明度會(huì)在清單中留下間隙。雖然第二種方法（不透明顯示）解決了佈局問題，但它會(huì)幹?jǐn)_平滑的淡出效果，因?yàn)樵诘氲鐾瓿芍皯?yīng)用了 display: none。這會(huì)導(dǎo)致突然消失而不是逐漸褪色。

例如，不透明度屬性可以從 0 平滑過渡到 1。但是，顯示屬性無法進(jìn)行動(dòng)畫處理，因?yàn)樗鼪]有數(shù)字範(fàn)圍 - 它的狀態(tài)是二進(jìn)制的，例如無、區(qū)塊或其他值。由於沒有中間值，CSS 無法為顯示設(shè)定動(dòng)畫。

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

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

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

基於 CSS 的解決方案

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

再次使用待辦事項(xiàng)清單作為範(fàn)例，實(shí)作看起來有點(diǎ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，延遲後將高度和填充設(shè)置為 0。不透明度的延遲和長度需要相同 - 在本例中為 400 毫秒。 height: 0 確保清單項(xiàng)目不與版面配置互動(dòng)。如前所述，height: auto 根據(jù)內(nèi)容動(dòng)態(tài)調(diào)整；因此，它不能被動(dòng)畫化。因此，您需要確保元素具有特定的固定高度，以使動(dòng)畫正常運(yùn)作。

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

將元素動(dòng)畫化為其固有尺寸（或高度：自動(dòng)）的最常見 CSS 解決方案是使用 max-height 而不是 height。這不是最簡潔的實(shí)現(xiàn)，但它可以完成工作?；旧希鷮?max-height 設(shè)定為大於元素所能獲得的值。這樣，它就可以模仿平滑過渡，類似於固定高度的動(dòng)畫：

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

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

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

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

JavaScript 方法

上面討論的所有 CSS 解決方案都非常複雜，並且可能會(huì)導(dǎo)致不可預(yù)測(cè)的結(jié)果。直到最近，實(shí)現(xiàn)這一目標(biāo)的最可靠方法還是透過 JavaScript。

要在不透明度轉(zhuǎn)換後套用不顯示，我們可以使用 setInterval 或 setTimeout 函數(shù)來新增與不透明度轉(zhuǎn)換持續(xù)時(shí)間相符的延遲。在此延遲之後，您可以將顯示設(shè)為無。這是一個(gè)例子：

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;
}

在此程式碼中，按一下按鈕後，元素會(huì)在一秒鐘內(nèi)淡出，然後其顯示立即設(shè)為無 - 實(shí)質(zhì)上是將其從佈局中刪除。

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

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

具體操作方法如下：

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

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

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

用於動(dòng)畫顯示和固有尺寸屬性的新 CSS 功能

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

顯示和關(guān)鍵幀

@keyframes at 規(guī)則可讓您透過控制動(dòng)畫序列中的中間步驟來建立動(dòng)畫。最新更新可讓您在關(guān)鍵影格時(shí)間軸內(nèi)對(duì)顯示和內(nèi)容可見性屬性進(jìn)行動(dòng)畫處理。

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

Chrome 開發(fā)部落格有一個(gè)非?？岬难菔?，讓事情變得清晰：

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

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

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;
}

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

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

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

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

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

使用 @starting-style 的進(jìn)入動(dòng)畫

我們?cè)诒疚闹袕V泛討論了淡出效果。但相反的情況又如何呢？進(jìn)入動(dòng)畫很棘手，通常只能透過 JavaScript 實(shí)現(xiàn)。新的 @starting-style at-rule 讓事情變得更容易。

顧名思義，我們可以使用它來將樣式應(yīng)用於元素，瀏覽器可以在元素在頁面上可見之前找到該樣式。我們可以在這裡設(shè)定進(jìn)入動(dòng)畫的初始狀態(tài)。元素渲染後，它會(huì)轉(zhuǎn)換回預(yù)設(shè)狀態(tài)。

這是一個(gè)基本範(fàn)例：

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 加載，卡片就會(huì)淡入。您可以將@starting-style用於各種進(jìn)入動(dòng)畫。這是 Chrome 開發(fā)團(tuán)隊(duì)的另一個(gè)很棒的範(fàn)例：

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

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

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

這對(duì)於將元素動(dòng)畫化到其固有尺寸或改變其固有尺寸特別有用。 calc-size 允許將目前在 CSS 中指定的任何高度動(dòng)畫化為零或到/從一個(gè)小的固定值。這是一個(gè)將可折疊部分從 height: 0 擴(kuò)展到 auto:
的簡單範(fà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;
}

瀏覽器相容性

這些功能大部分主要是為了增強(qiáng)動(dòng)畫而不是必需的 DOM 元件，但由於它們相對(duì)較新，因此仍然值得檢查瀏覽器相容性：

• 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 之外，所有主要瀏覽器都完全支援它尚不支援顯示動(dòng)畫：無
• calc-size() 是 Chrome 129 中引入的最新功能，目前僅在 Chrome 和 Edge 中支援。不過，其他主流瀏覽器很快就會(huì)支援它

結(jié)論

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

新功能，例如使用關(guān)鍵影格進(jìn)行動(dòng)畫顯示、calc-size() 函數(shù)和轉(zhuǎn)場(chǎng)行為屬性，使這些動(dòng)畫更容易實(shí)現(xiàn)。這些函數(shù)消除了對(duì) JavaScript 的需求，從而允許更簡單的 CSS 動(dòng)畫。

---

您的前端是否佔(zhàn)用了使用者的 CPU？

隨著 Web 前端變得越來越複雜，資源貪婪的功能對(duì)瀏覽器的要求越來越高。如果您有興趣監(jiān)控和追蹤生產(chǎn)中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請(qǐng)嘗試 LogRocket。

LogRocket 就像是網(wǎng)路和行動(dòng)應(yīng)用程式的 DVR，記錄網(wǎng)路應(yīng)用程式、行動(dòng)應(yīng)用程式或網(wǎng)站中發(fā)生的所有情況。您無需猜測(cè)問題發(fā)生的原因，而是可以匯總和報(bào)告關(guān)鍵前端效能指標(biāo)、重播用戶會(huì)話以及應(yīng)用程式狀態(tài)、記錄網(wǎng)路請(qǐng)求並自動(dòng)顯示所有錯(cuò)誤。

現(xiàn)代化偵錯(cuò) Web 和行動(dòng)應(yīng)用程式的方式 - 開始免費(fèi)監(jiān)控。

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