CSS 中的過渡高度
本文將介紹幾種在 CSS 中將過渡應用於元素高度的方法。
在 CSS 中使用 transition 屬性與 max-height 和 overflow 屬性來轉換高度
transition 是一種廣泛使用的屬性，可以在給定的持續時間內平滑地更改屬性值。過渡也可以命名為動畫。
轉換具有某些屬性，例如 transition-property、transition-duration、transition-timing-function 和 transition-delay。transition-property 定義了使用過渡效果更改的 CSS 屬性。
transition-duration 定義了完成轉換需要多長時間，即以秒為單位的時間。transition-timing-function 定義了過渡應該如何發生，即對過渡產生什麼影響。
transition-timing-function 可以有 ease, ease-in, ease-out, linear, ease-in-out 等。transition-delay 屬性指定了多少時間應該需要開始過渡。
我們可以組合這些屬性並使用轉換簡寫屬性，如下所示。
transition: height 2s linear 1s;
這裡，height 表示 transition-property，2s 定義 transition-duration，linear 指定 transition-timing-function，1s 定義 transition-delay。
我們可以使用 transition 和 max-height 屬性將元素的高度從 0 設定為 auto。我們可以將滑鼠懸停在文字上以更改特定 HTML 元素的高度。
當 max-height 設定為 0 時，我們可以使用 overflow:hidden 屬性隱藏溢位的專案。
例如，建立一個 div 並給它一個 main 的 id。在那個 div 中，建立一個段落標籤 p 並寫下 Hover Me。
接下來，建立一個帶有 ul 標籤的無序列表，並給它一個 ID 為 items。使用 li 標籤，在 ul 中建立一些列表項。
在 CSS 中，選擇 items id 並將 max-height 設定為 0。它確保不顯示 ul 內的專案。
接下來，將 background 屬性設定為 gray。將 overflow 屬性設定為 hidden。
當 max-height 為 0 時，它將隱藏溢位的 ul 專案。之後，將 transition 屬性設定為 max-height 0.15s ease-out。
當滑鼠游標懸停時，它將為列表項提供緩出效果。
使用 :hover 選擇器選擇 main id，然後選擇 items id。然後，將 max-height 的值設定為 500px。
因此，當螢幕尺寸小於 500px 時，它會根據 ul 項自動調整其高度。然後，將過渡屬性設定為 transition: max-height 0.25s ease-in;。
這將在 0.25 秒內將 ul 的高度設定為自動並具有 ease-in 效果。
下面的示例顯示了在將滑鼠懸停在具有效果的文字時顯示無序列表。懸停在文字之外時，無序列表會淡出。
<div id="main">
<p>Hover Me</p>
<ul id="items">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
#main #items {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: gray;
}
#main:hover #items {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
在 CSS 中使用帶有 transition 的 transform 屬性來轉換高度
transform 屬性用於元素的 2D 或 3D 轉換。該屬性可以具有諸如 rotate、scale、skew、move、translate 等值。
在本教程中，我們將使用 scale 來更改元素的高度。我們還將使用 transition 屬性在高度發生變化時建立動畫。
scale 屬性用於調整元素的大小。我們可以使用 scaleX 在 X 軸上使用 scale，並使用 scaleY 在 Y 軸上進行縮放。
在這裡，我們將使用 scaleY 來調整元素的高度，這應該是垂直的（沿 Y 軸）。scaleY(1) 值表示元素的高度為 100%，值 scaleY(0) 表示元素的高度為 0%。
有一個屬性叫做 transform-origin。它的值告訴我們應該從哪裡開始轉換。
由於我們想通過將高度從 0 增加到 auto 來從上到下擴充套件高度，我們可以將 transform-origin 的值設定為 top。當我們懸停一個元素時，我們可以將 transform 的值設定為 scaleY(1) 以將其高度設定為 auto。
我們將使用與第一種方法相同的 HTML 模板進行演示。
例如，選擇 #main #items 的 items id 並應用樣式。將背景顏色設定為灰色。
接下來，將 transform 屬性設定為 scaleY(0)。這會將元素的高度設定為 0。
然後將 transform-origin 屬性設定為 top，因為我們希望轉換從上到下開始。然後為 transition 屬性應用樣式 transform 0.3s ease。
這裡的 transform 表示我們希望在懸停時發生動畫的屬性。0.3s 表示完成動畫所需的時間。
ease 表示 transition-timing-function，表示動畫應該發生。最後，使用 : hover 選擇器將 transform 屬性設定為 scaleY(1)。
當我們懸停 div 時，ul 的高度隨著變換值從 scaleY(0) 變為 scaleY(1) 而增加。
示例程式碼：
<div id="main">
<p>Hover Me</p>
<ul id="items">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
#main #items {
background-color: gray;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
#main:hover #items {
transform: scaleY(1);
}