如果你使用 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

按讚的人:

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。