相同作用
能夠對元素進行隱藏
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 |
支持 |
支持 |
不支持 |