CSS 中的过渡高度

Rajeev Baniya 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用 transition 属性与 max-heightoverflow 属性来转换高度
  2. 在 CSS 中使用带有 transitiontransform 属性来转换高度
CSS 中的过渡高度

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

在 CSS 中使用 transition 属性与 max-heightoverflow 属性来转换高度

transition 是一种广泛使用的属性,可以在给定的持续时间内平滑地更改属性值。过渡也可以命名为动画。

转换具有某些属性,例如 transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-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-property2s 定义 transition-durationlinear 指定 transition-timing-function1s 定义 transition-delay

我们可以使用 transitionmax-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 中使用带有 transitiontransform 属性来转换高度

transform 属性用于元素的 2D 或 3D 转换。该属性可以具有诸如 rotatescaleskewmovetranslate 等值。

在本教程中,我们将使用 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 #itemsitems 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);
}

相关文章 - CSS Transition