visibility:hidden与display:none的一些比较与应用

首先看看两者在mdn上的解释:
visibility: visible | hidden | collapse | inherit
visible: 元素正常显示.
hidden: 隐藏元素,但是其他元素的布局不改变.相当于此元素变成透明
collapse: 暂时没用过,以后用到了再补充.
默认值是visible, 是继承属性:意味着我们给父元素设置visibility: hidden,则子元素继承该属性,表现为隐藏,符合我们的预期.
display: none | inline | block | flex ....
display 属性指定用于元素的呈现框的类型,元素默认的display属性取决于html规范中所描述的行为或浏览器的默认样式表.
比较特别的是display: none,声明了该属性的元素包括其子元素都不会被浏览器渲染.即元素节点"不存在".

区别

1. 首先是布局上: visibility:hidden 占用布局,display:none不会占用页面布局.
2. visibility: hidden是可以被过渡的属性(与transition配合使用).
   看例子:

.foo {
  background-color: orange;
  width: 100px;
  height: 100px;
  border: 1px solid;
  transition: all 0.5s ease-in;
  visibility: visible;
}

.foo:hover {
  visibility: hidden;
}

元素会在0.5s后隐藏.可以将它与opacity属性做类比: visible等价于1, hidden等价于0,当值为0时元素隐藏.

相同点

visibility:hidden的元素无法捕获点击等事件(与display: none相同)

一个用于二级导航的例子:

.menu-item-has-children:hover .sub-menu {
  visibility: visible;
  opacity: 1;
}
.sub-menu {
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

这里给二级导航栏添加了渐隐效果,同时为了防止二级导航栏隐藏以后依然可点击,于是添加了visibility属性过渡.

opacity: 0 时元素依然可以捕获点击事件! 此时只是元素变透明而已