display:none opacity:0以及visibility:hidden的区别

相同作用
能够对元素进行隐藏

空间占据

display:none;不占据空间，所以动态改变此属性时会引起重排。

visibility:hidden;元素会被隐藏，但是不会消失，依然占据空间。

opacity:0; 只是透明度为100%,元素隐藏，依然占据空间。

继承性

display:none; 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~

visibility:hidden; 会被子元素继承，可以通过设置子元素 visibility:visible 使子元素显示出来

opacity:0; 也会被子元素继承，但是不能通过设置子元素opacity:0 使其重新显示

动画效果transition

display

dispaly不仅仅对transition 无效，还能使其失效

<div class="big-box">
<div class="box  transition-display"> display</div>
</div>
//css
.transition-display{
display: none;
transition:display 2s; 
}
.transition-display:hover{
 display: block;
}

*visibility *

visibility visibility:visible 过渡到 visibility:hidden，不能从 visibility:hidden 过渡到 visibility:visible 。

元素从隐藏到实现 不能实现动画效果

//html
 <div class="big-box">
    <div class="box  transition-visibility">visibility</div>
  </div>
//css
.transition-visibility{
  visibility: hidden;
  transition: visibility 2s;
}
.transition-visibility:hover{
  visibility: visible;
}

如果是元素从显示到隐藏 可以进行实现动画效果

// css
.transition-visibility{
   visibility: visible;
   transition: visibility 1s;
  }
.transition-visibility:hover{
  visibility: hidden;
}

opacity

对transition有效

.undisplay.blue {
  width: 200px;
  height: 200px;
  background: blue;
}

.undisplay.yellow {
  width: 100px;
  height: 100px;
  background: yellow;
  opacity: 0;
  //增加display
  display: none;
  transition: 1s
}

.undisplay.blue:hover .yellow {
  opacity: 1;
  //增加display
  display: block;
}

总结

display:none visibility:hidden opacity:0
是否占据页面空间 否 是 是
子元素设置该属性其他值是否可以继续显示 否 是 否
自身绑定的事件能够出发 不能触发 不能触发 能触发
是否挡住其他元素出发事件 不影响 不影响 影响
是否产生回流（reflow) 产生 不产生 不产生
是否产生重绘 产生 产生 不一定产生
是否支持transition 不支持 支持 仅支持从 visibility:visible 过渡到 visibility:hidden， 支持