CSS網格可以進行自動高度過渡

CSS技巧提示！ Nelson Menezes 發現了一種新方法（目前僅在Firefox 中有效），非常巧妙。

您可能知道CSS 無法動畫到自動尺寸，這非常不幸。從零動畫到“所需尺寸”在很多情況下都非常有用。我們已經記錄了可用的技術。它們歸結為：

• 將max-height動畫到比您需要的更大的值，這使得時間緩動不精確且不流暢。
• 使用JavaScript 來測量最終大小並對其進行動畫處理，這意味著……使用JavaScript。

Nelson 的技術既不是這些，也不是某種具有視覺尷尬的基於轉換的方法。此技術核心使用了CSS Grid……

 .expander {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.expander.expanded {
  grid-template-rows: 1fr;
}

令人難以置信的是，在Firefox 中，這會在該區域內的內容之間進行0 到內容自然高度之間的過渡。只需要做一點點額外的工作，例如隱藏溢出和可見性以使其外觀正確，同時保持可訪問性：

這太棒了。讓我們在這個問題上獲得一些關注，也許Chrome 也會採用它。但是，當然，如果自動高度過渡開始工作會更好。我無法想像這完全不可能實現。

以上是CSS網格可以進行自動高度過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！