如果你使用 CSS 時間夠長，那麼你很可能至少嘗試過一次從 height: 0 到 auto 的轉換...結果卻發現它確實如此。行不通！ 😢
➡️幸運的是，今天這個問題實際上有一個解決方案：它在底層使用CSS Grid，而且它如此簡單並且完美執行！
讓我們從一個實際的例子開始。我建立了這個簡單的手風琴：
https://codepen.io/francescovetere/pen/MWLXjNx
它的 HTML 非常簡單：
<div class="accordion">
<div class="accordion-title">Hover me!</div>
<div class="accordion-body">
<div>
<p>Lorem ipsum ...</p>
</div>
</div>
</div>
如果您將滑鼠懸停在手風琴上，您會注意到出現下拉選單。這很酷，但是如果我們想讓它看起來有一個很好的平滑過渡怎麼辦？**
我實際上嘗試在之前的程式碼筆中通過在“height”屬性上加入一些過渡來做到這一點：
.accordion-body {
height: 0;
transition: 500ms height ease;
}
.accordion:hover .accordion-body {
height: auto;
}
❌不幸的是，這不起作用：從 height: 0 轉換到 height: auto，正如我之前所說，** CSS 是不可能的。**
🤔 如何解決這個問題？
好吧，第一個解決方案可以將 height 屬性設為 固定數字，而不是 auto。
這是可行的，但它不是一個很好的方法：為了計算這個固定數字，我們必須求助於JavaScript，以便計算我們的“.accordion-body”實際上是多少高. .. 不是我們真正的目標！
😕 我們仍然可以實現這種效果，但是使用 僅 CSS 解決方案嗎？
💡 實際上，是的！ 為什麼我們不直接使用 max-height 來代替呢？
.accordion-body {
max-height: 0;
transition: 500ms max-height ease;
}
.accordion:hover .accordion-body {
max-height: 200px;
}
這將是結果：
https://codepen.io/francescovetere/pen/ExrRNVa
由於我們為「max-height」定義了一個固定值，瀏覽器現在能夠正確地執行轉換。
😕 唯一的問題是，由於我們為 max-height 定義了一個固定值，現在內容可能 可能溢出：
https://codepen.io/francescovetere/pen/VwgdmbW
如果您確定您的內容永遠不會達到特定高度...那麼使用此方法就完全沒問題！** 只需為“max-height”使用適當的值，然後您就可以了很好，可以走了。
但請注意，“max-height”的值越高，過渡變得越奇怪**（嘗試在之前的程式碼筆中加入“max-height: 1000px”，然後查看事情發生了怎樣的變化！）。
🤔 我們可以做得更好嗎？ 我們可以先避免任何固定的 height/max-height 嗎？
🎉 CSS 格來拯救！
✅ 我們實際上可以使用一個巧妙的技巧，它基本上包括使用單一網格專案製作CSS網格。
那麼我們真正要做的就是採用「grid-template-rows」並使其從「0fr」過渡到「1fr」：這樣，我們的網格項將從 0 過渡到「自然」高度。就是這麼簡單：
.accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: 250ms grid-template-rows ease;
}
.accordion:hover .accordion-body {
grid-template-rows: 1fr;
}
.accordion-body > div {
overflow: hidden;
}
這感覺乾淨多了。 沒有固定的高度，沒有花哨的東西，只是我們的手風琴按預期工作。 太棒了！ 😄
https://codepen.io/francescovetere/pen/BaGwBRx
此解決方案的一個警告是，您實際上需要為“.accordion-body”的內部“div”設定“overflow：hidden”才能使其工作。在我看來，這個額外的 CSS 是完全值得的，但請在評論中告訴我你的想法！
🎁 額外小提示
這個技巧之所以有效，是因為「網格模板行」（以及更一般地說，「網格軌道」）的「動畫性」。
對於某些瀏覽器來說，這是一個新功能：如果您存取此頁面，您會注意到網格追蹤可動畫性例如，僅從 版本 107 開始登陸 **Chrome。
在我撰寫本文時，所有主要瀏覽器都支援此功能，但如果您想在生產程式碼中使用此功能，請務必首先檢查相容性！
就這樣！如果您已經了解這個很棒的 CSS 功能，請隨時發表評論並告訴我！ 😉
下次見！ 👋
原文出處：https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
