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

Posted 2021-03-15 mfyngu

 

相同作用

能够对元素进行隐藏 

1.空间占据

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

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

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

2.继承性

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

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

 

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

3.动画效果transition 

display ：

<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 :鼠标hover后 无效

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

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

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

 visible => hidden */
   /* .transition-visibility{
    visibility: visible; 
    transition: visibility 1s; 
   }
   .transition-visibility:hover{
    visibility: hidden; 
   } 

　

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

opacity 对transition有效

dispaly不仅仅对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;
  }     
    

　

4.事件触发

此时过度效果消失

4.1对自身事件

display:none 无占用空间元素，因此无法点击事件

visibility:hidden元素无效 绑定的事件无效:已经不可以接受js效果

事件：点击、hover事件不反应

但是能够操作dom元素的css的属性、样式等

document.getElementsByClassName(‘visibility-box‘)[0].style.visibility="visible"

　　

opacity:0 时 元素不可显示 但是其事件有效

4.2 影响其他元素的事件

 

display:none 不会影响其他的元素
opacity:0

 <div class="big-box other-box">
      <div  class=‘red red2‘>
        <div class=‘yellow opacity‘></div>
      </div>
      <p  class=‘blue‘ onmouseenter=alert(0)></p>
    </div>

　　

 

visibility:hidden 不能挡住其他元素的事件

5.回流与重绘

 

回流（reflow)
当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。 每个页面至少需要一次回流，就是在页面第一次加载的时候
dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

是否产生重绘（repaint）
当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。
js改属性进行操作

 <div class="box-wrapper">
    <h3>回流和重绘</h3>
    <div id="target">重绘 repaint</div>
    <div class="big-box">
    </div>
  </div>  
 var flag = false;
      setInterval(function () {
        flag = !flag;
        target.style.opacity = flag ? 0 : 1;
      },1000)

　　

此时页面闪动的 

增加transition 页面闪动去除 ，这时候 opacity 不会触发重绘。

 

 #target{
        transition:1s
      }

　　

** 查看重绘的方式 

 

display:none 可以说是web显隐交互中出场频率最高的一种隐藏方式，是真正意义上的隐藏，干净利落，不留痕迹none隐藏产生reflow和repaint(回流与重绘) 
visibility:hidden没有这个影响前端性能的问题

6.计数器

<div class="box-wrapper">
  <h3>计数器</h3>
  <h5>display-none</h5>
    <ol>
     
      <li>1</li>
      <li class="display-none">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <h5>visibility</h5>
    <ol>
      <li>1</li>
      <li class="visibility">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <h5>opacity</h5>
    <ol>
      <li>1</li>
      <li class="opacity">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div> 
</div>

　　

 

display:none 影响计数器计数
visibility和opacity不会影响计数器技术

总结

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