display:none； visibility:hidden； opacity:0 区别

display:none

1、DOM结构：浏览器不会渲染display为none的元素，不占据空间；

2、事件监听：无法进行DOM事件监听；

3、性能：动态改变DOM结构，会引起重排，性能较差；

4、继承：不会被子元素继承，因为子元素不会被渲染；

5、transition:不支持display。

visibility:hidden

1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间；

2、事件监听：无法进行DOM事件监听

3、性能：动态改变此属性会引起重绘，性能友好；

4、继承：回被子元素继承，子元素通过设置visibility:visible来取消隐藏；

5、transition：visibility时会立即显示，hidden时会延时

opacity:0

1、DOM结构：透明度设置为100%时，元素被隐藏，还在文档流中，占据一定空间；

2、事件监听：可以进行事件监听；

3、性能：提升为合成层，不会触发重绘，性能较高；

4、继承：会被子元素继承，但子元素不能通过opacity:1来取消隐藏；

5、transition:opacity可以延时显示和隐藏

实例：

1、绑定事件

<style type="text/css">
	.son{
		opacity: 0;
		transition: opacity 5s;
		visibility: hidden;
	}
	.box:hover .son{
		visibility: visible;
		opacity: 1;
	}
  .box-display{
    display: none;
  }
  .box-visibility{
    visibility: hidden;
  }
  .box-opcity{
    opacity: 0;
  }
</style>
<div class="box-display" onclick="clickDisplay()">
  点我啊
</div>
<div class="box-visibility" onclick="clickVisibility()">
  点我啊
</div>
<div class="box-opcity" onclick="clickOpcity()">
  点我啊
</div>
<script>
  function clickDisplay() {
    console.log('test display');
  }
  function clickVisibility() {
    console.log('test isibility');
  }
  function clickOpcity() {
    console.log('test Opcity');
  }
</script>

执行事件的时候，只有opcity触发

2、继承

<style type="text/css">
 .box-display{
    display: none;
  }
  .box-display .children-li{
    display: block;
  }
  .box-visibility{
    visibility: hidden;
  }
  .box-visibility .children-li{
    visibility: visible;
  }
  .box-opcity{
    opacity: 0;
  }
  .box-opcity .children-li{
    opacity: 100%;
  }
</style>
<ul class="box-display">
  <li>你看不见我1display</li>
  <li class="children-li">你看不见我2display</li>
  <li>你看不见我3isplay</li>
</ul>

<ul class="box-visibility">
  <li>你看不见我1isibility</li>
  <li class="children-li">你看不见我2visibility</li>
  <li>你看不见我3isibility</li>
</ul>
<ul class="box-opcity">
  <li>你看不见我1opcity</li>
  <li class="children-li">你看不见我opcity</li>
  <li>你看不见我3opcity</li>
</ul>

3、动画

 

<style type="text/css">

	.box-display .son{
		opacity: 0;
		transition: opacity 5s;
		display: none;
	}
	.box-display:hover .son{
		display: block;
		opacity: 1;
	}
 
  .box-visibility .son {
        opacity: 0;
		transition: opacity 5s;
		visibility: hidden;
  }
 
  .box-visibility:hover .son {
    visibility: visible;
		opacity: 1;
  }
  
  .box-opcity .son{
    opacity: 0;
	transition: opacity 5s;
  }
  .box-opcity:hover .son{
		opacity: 1;
  }
</style>
<div class="box-display">
  显示出来显示出来
  <div class="son">
	  我没有动画效果
  </div>
</div>

<div class="box-visibility">
  显示出来显示出来
  <div class="son">
	  我有动画效果
  </div>
</div>
<div class="box-opcity">
  显示出来显示出来
  <div class="son">
	  我有动画效果
  </div>
</div>

注意：

display:none参与的动画效果是不会产生过渡动画的,
即使你设置了过渡的时间。
 
visibility: hidden参与的动画会产生过渡效果;
因为css3对transition支持的属性中就visibility；
但是没有对display进行支持。

display为none,虽然不在文档流中，但是还在DOM 中