迹忆客 专注技术分享

本文将介绍几种在 CSS 中将过渡应用于元素高度的方法。

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;
}

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);
}