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.3
s 表示完成動畫所需的時間。
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);
}