迹忆客 专注技术分享

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

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

例如，创建一个 div 并使用 ul 和 li 标签创建一个包含三个无序列表项的列表。给 div 一个 1px solid black 的边框以查看它。将 ul 的属性设置为 opacity: 0 和 visibility: hidden 和 transition: visibility 0s, opacity 0.6s linear。我们同时使用 opacity 和 visibility 因为如果我们只使用 opacity: 0，项目仍然可以点击和悬停。将 ul 悬停属性设置为 visibility: visible 和 opacity: 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;
}

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

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

下面的例子显示 div 为空，div 的 height 为 0px。但是，当我们将鼠标悬停在 div 上时，项目列表会以 ease-in 效果显示。ease-in 选项设置过渡的缓慢开始。div 的 height 属性变为 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;
}