chuck

# CSS隐藏元素方式

原文链接：https://mp.weixin.qq.com/s/1tvY3ROEuXgH41tPE5iMuw (opens new window)

# opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

  • opacity: N：该属性用来设置元素的透明度；
  • filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜的透明度，用来设置元素的透明度。
div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
1
2
3
4
5
6
7

在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。

注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。

opacity

# color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：

div {
  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
1
2
3
4

这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。

Alpha 通道可以设置为：

  • transparent：完全透明（中间不能插入动画）；
  • rgba(r, g, b, a)：红色、绿色、蓝色和 alpha；
  • hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；
  • #RRGGBBAA 或 #RGBA。

color

# transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：

div {
  transform: scale(0);
}

div {
  translate(-9999px, 0px)
}
1
2
3
4
5
6
7

transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。

transform

# clip-path

clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0)可以将元素进行隐藏。

div {
  clip-path: circle(0);
}
1
2
3

clip-path为添加动画效果提供了空间，不过它只能在现代浏览器中使用。

clip-path

# visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。

div {
  visibility: hidden;
}
1
2
3

除非使用collapse值，否则元素使用的空间保持不变。

visibility

# display: none

display 可能是最常用的元素隐藏方法 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。

div {
   display: none;
}
1
2
3

然而，在大多数情况下，display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流，或者采用contain属性，否则它的隐藏过程无法设置动画，并将触发页面重新布局。

none

# z-index

可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。

div {
   z-index: -1;
}
1
2
3

z-index

# position

position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕。

div {
   position: absolute;
   left: -999px;
}
1
2
3
4

position

# 覆盖另一个元素

通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
1
2
3
4
5
6
7
8
9

absolute

# 缩小尺寸

可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。

absolute

代码片段整理