CSS 中的过渡高度
本文将介绍几种在 CSS 中将过渡应用于元素高度的方法。
在 CSS 中使用 transition 属性与 max-height 和 overflow 属性来转换高度
transition 是一种广泛使用的属性，可以在给定的持续时间内平滑地更改属性值。过渡也可以命名为动画。
转换具有某些属性，例如 transition-property、transition-duration、transition-timing-function 和 transition-delay。transition-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-property，2s 定义 transition-duration，linear 指定 transition-timing-function，1s 定义 transition-delay。
我们可以使用 transition 和 max-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 中使用带有 transition 的 transform 属性来转换高度
transform 属性用于元素的 2D 或 3D 转换。该属性可以具有诸如 rotate、scale、skew、move、translate 等值。
在本教程中，我们将使用 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 #items 的 items 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);
}