标签：查看 containe lock ble splay 相同 无法 图片 无效
能够对元素进行隐藏
display: none;不占据空间，所以动态改变此属性时会引起重排。
visibility: hidden元素会被隐藏，但是不会消失，依然占据空间。
opacity=0只是透明度为100%,元素隐藏，依然占据空间。
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
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.事件触发
此时过度效果消失
display:none 无占用空间元素，因此无法点击事件
visibility:hidden元素无效 绑定的事件无效:已经不可以接受js效果
事件：点击、hover事件不反应
但是能够操作dom元素的css的属性、样式等
document.getElementsByClassName(‘visibility-box‘)[0].style.visibility="visible"
opacity:0 时 元素不可显示 但是其事件有效
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 不能挡住其他元素的事件
回流（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没有这个影响前端性能的问题
<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 |
支持 |
支持 |
不支持 |
display:none opacity:0以及visibility:hidden的区别
标签：查看 containe lock ble splay 相同 无法 图片 无效
原文地址：https://www.cnblogs.com/mfyngu/p/12206862.html
