如何使用CSS將過渡高度從0設(shè)置為自動(dòng)？-魔扣目錄

將高度從 0 過渡到“自動(dòng)”是一種在元素高度發(fā)生變化以適應(yīng)其內(nèi)容時(shí)平滑地設(shè)置動(dòng)畫效果的方法。在 Web 開發(fā)中，創(chuàng)建平滑且優(yōu)雅的過渡可以使網(wǎng)站更具吸引力并提供更好的用戶體驗(yàn)。但是，創(chuàng)建從高度 0 到“自動(dòng)”的過渡可能有點(diǎn)棘手。

語(yǔ)法

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

登錄后復(fù)制

這里，property是我們想要?jiǎng)赢嫷腃SS屬性，duration是我們想要過渡到最后的時(shí)間長(zhǎng)度，timing-function 指定過渡的時(shí)間曲線或速度，它決定動(dòng)畫如何隨時(shí)間加速或減速，而 delay 是一個(gè)可選參數(shù)，用于設(shè)置開始過渡之前等待的時(shí)間量。

過渡高度

在 CSS 中，過渡是一種在元素的兩種狀態(tài)之間創(chuàng)建平滑動(dòng)態(tài)動(dòng)畫的方法。具體來(lái)說(shuō)，過渡高度是指元素高度屬性發(fā)生變化時(shí)出現(xiàn)的動(dòng)畫效果，改善用戶體驗(yàn)，讓網(wǎng)站更具吸引力。

例如，如果我們想在展開或折疊 div 或切換下拉菜單的可見性時(shí)創(chuàng)建平滑過渡。我們可以使用 CSS 過渡屬性和 height 屬性輕松地做到這一點(diǎn)，

動(dòng)畫高度從 0 到“自動(dòng)”

當(dāng)我們想要?jiǎng)?chuàng)建從高度 0 到“auto”的過渡時(shí)，并不只是將 height 屬性設(shè)置為“auto”那么簡(jiǎn)單。事實(shí)上，“auto”值對(duì)于 CSS 轉(zhuǎn)換來(lái)說(shuō)不是有效值。我們可以通過以下步驟來(lái)做到這一點(diǎn)。

第 1 步：創(chuàng)建 HTML 結(jié)構(gòu)

要?jiǎng)?chuàng)建過渡，首先我們需要一個(gè) HTML 元素來(lái)應(yīng)用它。讓我們使用一個(gè)帶有“element”類的 div。

例如 –

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

登錄后復(fù)制

第 2 步：添加 CSS

創(chuàng)建 HTML 結(jié)構(gòu)后，我們需要添加一些 CSS 來(lái)創(chuàng)建過渡。我們首先將“element”類的初始高度設(shè)置為 0，并隱藏溢出。

例如 –

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

登錄后復(fù)制

這將隱藏元素內(nèi)的內(nèi)容，直到展開為止。

第 3 步：添加過渡

現(xiàn)在，我們需要向元素添加過渡屬性。我們使用 height 屬性并設(shè)置持續(xù)時(shí)間和計(jì)時(shí)函數(shù)。

例如 –

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

登錄后復(fù)制

在此示例中，過渡將花費(fèi) 0.5 秒并使用緩出計(jì)時(shí)功能，這意味著過渡將快速開始并在結(jié)束時(shí)減慢。

第4步：設(shè)置展開狀態(tài)

這里，為了設(shè)置元素的展開狀態(tài)，我們使用偽類并將高度設(shè)置為 auto。

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

登錄后復(fù)制

示例 1

這是一個(gè)使用 CSS 將過渡高度從 0 設(shè)置為自動(dòng)的示例。

<!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>

登錄后復(fù)制

示例 2

這是使用 CSS 將過渡高度從 0 設(shè)置為自動(dòng)的另一個(gè)示例。

<!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>

登錄后復(fù)制