如何使用CSS将过渡高度从0设置为自动？

WBOY 转载: 2023-09-18 12:29:02 958浏览

将高度从 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>