CSS 中的過渡高度

Rajeev Baniya 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用 transition 屬性與 max-heightoverflow 屬性來轉換高度
  2. 在 CSS 中使用帶有 transitiontransform 屬性來轉換高度
CSS 中的過渡高度

本文將介紹幾種在 CSS 中將過渡應用於元素高度的方法。

在 CSS 中使用 transition 屬性與 max-heightoverflow 屬性來轉換高度

transition 是一種廣泛使用的屬性,可以在給定的持續時間內平滑地更改屬性值。過渡也可以命名為動畫。

轉換具有某些屬性,例如 transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-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-property2s 定義 transition-durationlinear 指定 transition-timing-function1s 定義 transition-delay

我們可以使用 transitionmax-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 中使用帶有 transitiontransform 屬性來轉換高度

transform 屬性用於元素的 2D 或 3D 轉換。該屬性可以具有諸如 rotatescaleskewmovetranslate 等值。

在本教程中,我們將使用 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 #itemsitems 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);
}

相關文章 - CSS Transition