返回

过渡:display 不支持 visibility:hidden opacity:0 区别

前端

在前端开发中，经常会用到 transition 过渡效果，它可以使元素在状态之间平滑过渡。当我们需要隐藏元素时，通常会使用 display:none、visibility:hidden 或 opacity:0 来实现。但是，如果我们在使用 transition 过渡效果时，display:none 是不支持的。

display:none

display:none 会完全隐藏元素，包括元素及其子元素。这意味着元素不会在页面上占据任何空间，也不会被其他元素影响。当 display:none 用于 transition 过渡时，元素会立即从页面上消失，而不会产生任何过渡效果。

visibility:hidden

visibility:hidden 会使元素不可见，但元素及其子元素仍然在页面上占据空间。这意味着其他元素仍然可以受到元素的影响，元素也会受到其他元素的影响。当 visibility:hidden 用于 transition 过渡时，元素会逐渐淡出，直到完全消失。

opacity:0

opacity:0 会使元素的透明度变为0，从而使元素不可见。但是，元素及其子元素仍然在页面上占据空间，并且元素仍然可以受到其他元素的影响，其他元素也会受到元素的影响。当 opacity:0 用于 transition 过渡时，元素会逐渐淡出，直到完全透明。

过渡:display 不支持 visibility:hidden opacity:0 区别

因此，在使用 transition 过渡效果时，我们应该使用 visibility:hidden 或 opacity:0 来隐藏元素，而不是使用 display:none。这将使元素能够在状态之间平滑过渡。

实例

以下是一个使用 visibility:hidden 来隐藏元素的示例：

.element {
  transition: opacity 1s;
}

.hidden {
  visibility: hidden;
}

当我们使用 JavaScript 来控制元素的可见性时，我们可以使用以下代码：

document.querySelector('.element').classList.add('hidden');

这将使元素逐渐淡出，直到完全隐藏。