在 CSS 中设置淡入淡出

Rajeev Baniya 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 opacityvisibility 属性以及 transition 属性设置过渡
  2. 在 CSS 中使用 heightopacityoverflow 属性以及 transition 属性设置过渡
在 CSS 中设置淡入淡出

本文将介绍 CSS 中设置过渡的方法。我们将学习在 opacityheightvisibility 上使用过渡来在悬停和悬停时提供淡入和淡出效果。

在 CSS 中使用 opacityvisibility 属性以及 transition 属性设置过渡

我们不能在 CSS 的 display 属性中使用 transition 属性。例如,我们不能使用 CSS transition 属性在悬停(鼠标进入)后将 display : none 更改为 display : block,反之亦然。因此,我们可以使用 opacityvisibility 属性以及过渡来为项目提供淡入和淡出效果。Transition 具有某些属性,例如 transition-propertytransition-durationtransition-timing-functiontransition-delay。我们也可以使用 transition 速记属性作为 transition : opacity 2s linear 1s。这里 opacity 表示 transition-property2s 表示 transition-durationlinear 表示 transition-timing-function,而 1s 表示 transition-delay。我们可以使用悬停来试验 transition

例如,创建一个 div 并使用 ulli 标签创建一个包含三个无序列表项的列表。给 div 一个 1px solid black 的边框以查看它。将 ul 的属性设置为 opacity: 0visibility: hiddentransition: visibility 0s, opacity 0.6s linear。我们同时使用 opacityvisibility 因为如果我们只使用 opacity: 0,项目仍然可以点击和悬停。将 ul 悬停属性设置为 visibility: visibleopacity: 1,以便 ul 的列表项仅在悬停时显示一些 transition 效果。

下面的示例显示 ul 的项目仅在悬停时可见。这些项目在 0.6 秒内以线性效果出现,并在将鼠标移开时再次隐藏。

示例代码:

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>
div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

在 CSS 中使用 heightopacityoverflow 属性以及 transition 属性设置过渡

另一种在 display: nonedisplay: block 上使用过渡的替代方法可能是与过渡一起使用的 heightoverflowopacity 属性。我们可以为列表设置 opacity : 0height : 0 以便看不到项目。我们还必须设置 overflow: hidden,以便项目不会超出 divtransition-duration 需要时间。我们可以像第一种方法一样使用 transition 速记属性。

例如,创建一个 div 并使用 ulli 标签创建一个包含三个无序项目的列表。给 div 一个 1px solid black 边框,与第一种方法相同。将 ul 的属性设置为 opacity: 0overflow: hiddenheight: 0。将 transition 属性的值设置为 opacity 0.6s ease-in。将 ul 悬停属性设置为 height: autoopacity: 1,以便 ul 的列表项仅在悬停时显示一些 transition 效果。

下面的例子显示 div 为空,divheight0px。但是,当我们将鼠标悬停在 div 上时,项目列表会以 ease-in 效果显示。ease-in 选项设置过渡的缓慢开始。divheight 属性变为 auto。当我们从 div 中悬停时,它又变成了空的。

示例代码:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>
div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}

相关文章 - CSS Transition