实现方式

通过css实现隐藏元素方法有如下：

1.display: none: 渲染树不会渲染对象

2.visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件。

3.opacity: 0: 元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

4.position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

5.z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐藏。

6.clip/clip-path: 元素仍在页面中占据位置，但是不会响应绑定的监听事件。

7.transform: scale(0,0): 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

8、color alpha 透明度

9、可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸

10、覆盖另一个元素

11、transform 属性可以用于元素的平移、缩放、旋转或倾斜等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
解释1. visibility: hidden;   这个属性只是简单的隐藏某个元素, 但是元素占用的空间任然存在 

2. opacity: 0;   一个CSS3属性, 设置 0 可以使一个元素完全透明, 制作出和 visibility 一样的效果 。 与 visibility 相比, 它可以被 transition 和 animate 。

3. position: absolute;    使元素脱离文档流, 处于普通文档之上, 给它设置一个很大的 left 负值定位, 使元素定位在可见区域之外 。

4. display: none;  元素会变得不可见, 并且不会再占用文档的空间 。

5. transform: scale(0);   将一个元素设置为无限小, 这个元素将不可见 。 这个元素原来所在的位置将被保留 。

6. HTML5 hidden attribute; hidden 属性的效果和 display:none; 相同, 这个属性用于记录一个元素的状态 。

7. height: 0; overflow: hidden; 将元素在垂直方向上收缩为0, 使元素消失 。 只要元素没有可见的边框, 该技术就可以正常工作 。

8. filter: blur(0); 将一个元素的模糊度设置为0, 从而使这个元素“消失”在页面中 。

display:none

设置元素的display为none是最常用的隐藏元素的方法

1
2
3
.hide {
    display:none;
}

将元素设置为display:none后，元素在页面上将彻底消失

元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘

消失后，自身绑定的事件不会触发，也不会有过渡效果

特点：元素不可见，不占据空间，无法响应点击事件

color alpha 透明度

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

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

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

Alpha 通道可以设置为：

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

transform

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

1
2
3
4
5
6
7
解释div {
 transform: scale(0);
}

div {
 translate(-9999px, 0px)
}

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

z-index

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

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

position

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

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

覆盖另一个元素

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

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

虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。

缩小尺寸

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

1
2
3
4
5
解释div {
  height: 0;
  padding: 0;
  overflow: hidden;
}

使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法

从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘

1
2
3
.hidden{
    visibility:hidden
}

给人的效果是隐藏了，所以他自身的事件不会触发

特点：元素不可见，占据页面空间，无法响应点击事件

opacity:0

opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的

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

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

不会引发重排，一般情况下也会引发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

1
2
3
.transparent {
    opacity:0;
}

由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的

需要注意的是：其子元素不能设置opacity来达到显示的效果

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

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

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

设置height、width属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

1
2
3
4
5
6
7
8
解释.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute

将元素移出可视区域

1
2
3
4
5
解释.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

特点：元素不可见，不影响页面布局

clip-path

通过裁剪的形式

1
2
3
.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特点：元素不可见，占据页面空间，无法响应点击事件

最常见常用的三种方法为display: none、visibility: hidden、opacity: 0。

区别

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

display: none visibility: hidden opacity: 0
页面中 不存在 存在 存在
重排 会 不会 不会
重绘 会 会 不一定
自身绑定事件 不触发 不触发 可触发
transition 不支持 支持 支持
子元素可复原 不能 能 不能
被遮挡的元素可触发事件 能 能 不能