首頁 >web前端 >css教學 >如何使用CSS將過渡高度從0設定為自動？

如何使用CSS將過渡高度從0設定為自動？

WBOY轉載: 2023-09-18 12:29:021621瀏覽

將高度從 0 過渡到「自動」是一種在元素高度變化以適應其內容時平滑地設定動畫效果的方法。在 Web 開發中，創建平滑且優雅的過渡可以使網站更具吸引力並提供更好的使用者體驗。但是，創建從高度 0 到“自動”的過渡可能有點棘手。

文法

transition: [property] [duration] [timing-function] [delay];

這裡，property是我們想要動畫的CSS屬性，duration是我們想要過渡到最後的時間長度，timing-function 指定過渡的時間曲線或速度，它決定動畫如何隨時間加速或減速，而delay 是一個可選參數，用於設定開始過渡之前等待的時間量。

過渡高度

在 CSS 中，過渡是一種在元素的兩種狀態之間創建平滑動態動畫的方法。具體來說，過渡高度是指元素高度屬性改變時出現的動畫效果，改善使用者體驗，讓網站更具吸引力。

例如，如果我們想在展開或折疊 div 或切換下拉選單的可見性時建立平滑過渡。我們可以使用 CSS 過渡屬性和 height 屬性輕鬆地做到這一點，

動畫高度從 0 到「自動」

當我們想要建立從高度 0 到「auto」的過渡時，並不只是將 height 屬性設為「auto」那麼簡單。事實上，「auto」值對於 CSS 轉換來說不是有效值。我們可以透過以下步驟來做到這一點。

第 1 步：建立 HTML 結構

要建立過渡，首先我們需要一個 HTML 元素來套用它。讓我們使用一個帶有“element”類別的 div。

例如 -

<div class="element">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

第 2 步：新增 CSS

建立 HTML 結構後，我們需要加入一些 CSS 來建立過渡。我們首先將「element」類別的初始高度設為 0，並隱藏溢出。

例如 -

.element {
   height: 0;
   overflow: hidden;
}

這將隱藏元素內的內容，直到展開為止。

第 3 步：新增過渡

現在，我們需要在元素中加入過渡屬性。我們使用 height 屬性並設定持續時間和計時函數。

例如 -

.element {
   height: 0;
   overflow: hidden;
   transition: height 0.5s ease-in-out;
}

在此範例中，過渡將花費 0.5 秒並使用緩出計時功能，這意味著過渡將快速開始並在結束時減慢。

第4步：設定展開狀態

這裡，為了設定元素的展開狀態，我們使用偽類別並將高度設為 auto。

input[type="checkbox"]:checked~.element {
   height: auto;
}

範例 1

這是一個使用 CSS 將過渡高度從 0 設定為自動的範例。

<!DOCTYPE html>
<html>
 <head>
   <style>
      body { text-align: center; }
      .element {
         height: 0;
         overflow: hidden;
         transition: height 0.5s ease-in-out;
      }
      input[type="checkbox"]:checked~.element {
         height: auto;
      }
      p { margin: 0;}
   </style>
</head>
   <body>
      <h3>Transitioning height 0 to auto using CSS</h3>
      <input type="checkbox" id="toggle">
      <label for="toggle">Toggle Element</label>
      <div class="element">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
      </div>
   </body>
</html>

範例 2

這是使用 CSS 將過渡高度從 0 設定為自動的另一個範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center;}
      .box {
         max-height: 0;
         width:200px;
         margin:auto;
         transition: max-height 1.4s ease-out;
         overflow: hidden;
         background: #b2ceed;
      }
      .tab:hover .box {
         max-height: 500px;
         transition: max-height 1s ease-in;
      }
   </style>
</head>
   <body>
      <h2>Transition height 0 to auto using CSS </h2>
      <div class="tab"><b>Hover on me to increase the height.</b>
         <div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
      </div>
   </body>
</html>

結論

使用 CSS 創建從 0 到自動的過渡是為網站添加視覺趣味的簡單而有效的方法。透過遵循本文中概述的步驟，我們可以輕鬆創建此效果並增強網站上的使用者體驗。

以上是如何使用CSS將過渡高度從0設定為自動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html auto Property function 伪类

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 設定所有動畫屬性的簡寫屬性下一篇：使用 CSS 設定所有動畫屬性的簡寫屬性

看更多