CSS 如何过渡CSS display + opacity属性

在本文中，我们将介绍如何使用CSS过渡(display + opacity)属性来实现元素在显示和隐藏以及透明度变化时的平滑过渡效果。

阅读更多：CSS 教程

什么是过渡属性

CSS过渡属性可以让我们在一个属性的两个状态之间创建平稳的动画效果。在本文中，我们将使用display和opacity属性来实现元素的隐藏，显示和透明度的变化。

过渡display属性

display属性控制元素在页面上的显示方式，常用的值有”none”和”block”。如果我们直接切换display属性的值，那么元素将会立即从屏幕上消失或出现，没有任何过渡效果。

为了实现平滑的过渡效果，我们可以使用CSS过渡属性结合opacity属性。下面是一个例子：

.box {
  opacity: 0; /* 元素初始透明度为0 */
  display: block; /* 元素显示 */
  transition: opacity 0.5s; /* 过渡效果持续时间为0.5秒 */
}

.box.show {
  opacity: 1; /* 元素透明度变为1 */
}

在上面的例子中，我们通过操作.opacity类来控制元素的显示和隐藏。通过将透明度设置为0，元素将从屏幕上消失，然后通过添加.show类并将透明度设置为1，元素将以平滑的过渡效果重新显示。

过渡opacity属性

opacity属性控制元素的透明度，它接受一个介于0（完全透明）和1（完全不透明）之间的值。与display属性不同，我们可以直接使用opacity属性来创建过渡效果，而不需要额外操作。

下面是一个使用opacity属性过渡透明度的例子：

.box {
  opacity: 0; /* 元素初始透明度为0 */
  transition: opacity 0.5s; /* 过渡效果持续时间为0.5秒 */
}

.box.show {
  opacity: 1; /* 元素的透明度变为1 */
}

在上面的例子中，我们使用.opacity类来控制元素的透明度变化。初始时，元素的透明度为0，在添加.show类后，透明度将在0.5秒的时间内平滑地变为1，实现了元素的渐现效果。

组合过渡效果

除了单独过渡display属性和opacity属性，我们还可以将它们组合在一起，以实现更复杂的过渡效果。

下面是一个例子，通过组合display和opacity属性来实现元素的显示和隐藏以及透明度变化的过渡效果：

.box {
  opacity: 0; /* 元素初始透明度为0 */
  display: none; /* 元素隐藏 */
  transition: opacity 0.5s, display 0s 0.5s; /* 过渡效果持续时间为0.5秒，并且延迟0.5秒执行display属性的过渡 */
}

.box.show {
  opacity: 1; /* 元素透明度变为1 */
  display: block; /* 元素显示 */
  transition-delay: 0s; /* 取消display属性的过渡延迟 */
}

在上面的例子中，通过设置transition-delay属性来延迟display属性的过渡执行时间，使得在透明度动画完成之后，再执行display属性的过渡效果。从而实现了元素的平滑显示和隐藏效果。