国产日韩一区二区三区在线播放,久久精品视频6,中国一级毛片录像

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

語法

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

登錄后復(fù)制

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

過渡高度

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

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

動畫高度從 0 到“自動”

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

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

要創(chuàng)建過渡，首先我們需要一個 HTML 元素來應(yīng)用它。讓我們使用一個帶有“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 來創(chuàng)建過渡。我們首先將“element”類的初始高度設(shè)置為 0，并隱藏溢出。

例如 –

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

登錄后復(fù)制

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

第 3 步：添加過渡

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

例如 –

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

登錄后復(fù)制

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

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

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

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

登錄后復(fù)制

示例 1

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

<!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è)置為自動的另一個示例。

<!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ù)制