其他分享
首页 > 其他分享> > display:none; visibility:hidden; opacity:0 区别

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 中
 

标签:opacity,box,none,transition,visibility,hidden,display
来源: https://blog.csdn.net/weixin_36430673/article/details/122436627