摘要：說(shuō)明用來(lái)設(shè)置透明度定義建立布局時(shí)元素生成的顯示框類型用來(lái)設(shè)置元素是否可見(jiàn)?？偟膩?lái)說(shuō)，使用和屬性，自身的事件不會(huì)觸發(fā)，而使用屬性，自身綁定的事件還是會(huì)觸發(fā)的。

opacity 用來(lái)設(shè)置透明度
display 定義建立布局時(shí)元素生成的顯示框類型
visibility 用來(lái)設(shè)置元素是否可見(jiàn)。
opacity、visibility、display 這三個(gè)屬性分別取值 0、hidden、none 都能使元素在頁(yè)面上看不見(jiàn)，但是他們?cè)诜椒矫婷娑歼€是有區(qū)別的。

舉個(gè)例子

最開(kāi)始的樣子

黃色塊div元素 使用 opacity:0; 時(shí)

黃色塊div元素 使用 visibility:hidden; 時(shí)

黃色塊div元素 使用 display:none; 時(shí)

可以看出，使用 opacity 和 visibility 屬性時(shí)，元素還是會(huì)占據(jù)頁(yè)面空間的，而使用 display 屬性時(shí)，元素不占據(jù)頁(yè)面空間。

如果子元素什么都不設(shè)置的話，都會(huì)受父元素的影響，和父元素的顯示效果一樣，我們就來(lái)舉例看看，如果子元素設(shè)置的值 和 父元素設(shè)置的值不同會(huì)有什么效果。
例子 （opacity屬性）

例子 （visibility屬性）

例子 （display屬性）

可以看出，使用 opacity 和 display 屬性時(shí)，父元素對(duì)子元素的影響很明顯，子元素設(shè)置的 opacity 和 display 屬性是不起作用的，顯示的效果和父元素一樣，而使用 visibility 屬性時(shí)，子元素如果設(shè)置為 visibility:visible; 并沒(méi)有受父元素的影響，可以繼續(xù)顯示出來(lái)。

這里說(shuō)的觸發(fā)事件，是指用戶人為的觸發(fā)的事件，不包括使用 JavaScript 模擬觸發(fā)的事件。
例子 （opacity屬性）

例子 （visibility屬性）

使用 display:none; 就不用舉例子了，因?yàn)槭褂?display 屬性的話，元素不僅看不見(jiàn)，而且也不占據(jù)頁(yè)面空間，所有不會(huì)觸發(fā)事件。

總的來(lái)說(shuō)，使用 visibility 和 display 屬性，自身的事件不會(huì)觸發(fā)，而使用 opacity 屬性，自身綁定的事件還是會(huì)觸發(fā)的。

例子（opacity屬性）

黃色塊div元素設(shè)置 opacity:0; ，通過(guò)定位，遮擋住了 藍(lán)色的p元素，當(dāng)鼠標(biāo)移到藍(lán)色p元素上時(shí)，并沒(méi)有觸發(fā)藍(lán)色p元素的事件。

例子（visibility屬性）

黃色塊div元素設(shè)置 visibility:hidden; ，通過(guò)定位，雖然遮擋住了 藍(lán)色的p元素，但是當(dāng)鼠標(biāo)移到藍(lán)色p元素上時(shí)，還是觸發(fā)了藍(lán)色p元素綁定的事件。

和上邊一樣，display 屬性就不舉例子了，因?yàn)樗粫?huì)占據(jù)頁(yè)面空間，也就不會(huì)遮擋其他元素，就不會(huì)影響其他元素觸發(fā)事件了。
所以，visibility 和 display 屬性是不會(huì)影響其他元素觸發(fā)事件的，而 opacity 屬性 如果遮擋住其他元素，其他的元素就不會(huì)觸發(fā)事件了。

回流

當(dāng)頁(yè)面中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(也有人會(huì)把回流叫做是重布局或者重排)。
每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。

dispaly 屬性會(huì)產(chǎn)生回流，而 opacity 和 visibility 屬性不會(huì)產(chǎn)生回流。

重繪

當(dāng)頁(yè)面中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的時(shí)候，比如background-color。則稱為重繪。

dispaly 和 visibility 屬性會(huì)產(chǎn)生重繪，而 opacity 屬性不一定會(huì)產(chǎn)生重繪。

元素提升為合成層后，transform 和 opacity 不會(huì)觸發(fā) repaint，如果不是合成層，則其依然會(huì)觸發(fā) repaint。
在 Blink 和 WebKit 內(nèi)核的瀏覽器中，對(duì)于應(yīng)用了 transition 或者 animation 的 opacity 元素，瀏覽器會(huì)將渲染層提升為合成層。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 來(lái)人為地強(qiáng)制性地創(chuàng)建一個(gè)合成層。

舉個(gè)例子

  


    
重繪 repaint

    

我們可以用 Chrome DevTools 的 Rendering 來(lái)看看，
先打開(kāi) Rendering

把第一個(gè)選項(xiàng)勾選，這個(gè)選項(xiàng)會(huì) 高亮顯示需要重繪的區(qū)域。

看看效果

改改代碼，增加上個(gè) transition

  
  


    
重繪 repaint

    

再看看效果

加上 transition 后就沒(méi)有 高亮顯示了，這時(shí)候 opacity 不會(huì)觸發(fā)重繪。

實(shí)際上透明度改變后，GPU 在繪畫時(shí)只是簡(jiǎn)單的降低之前已經(jīng)畫好的紋理的 alpha 值來(lái)達(dá)到效果，并不需要整體的重繪。不過(guò)這個(gè)前提是這個(gè)被修改的 opacity 本身必須是一個(gè)圖層，如果圖層下還有其他節(jié)點(diǎn)，GPU 也會(huì)將他們透明化。

注意：回流必將引起重繪，而重繪不一定會(huì)引起回流。

opacity 是支持 transition的，一般淡入淡出的效果就是這樣實(shí)現(xiàn)的。

visibility 也是支持 transition 的。

visibility: 離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”

visibility : hidden; 可以看成 visibility : 0;
visibility : visible; 可以看成 visibility : 1;

只要 visibility 的值大于0就是顯示的，所以
visibility:visible 過(guò)渡到 visibility:hidden，看上去不是平滑的過(guò)渡，而是進(jìn)行了一個(gè)延時(shí)。

而如果 visibility:hidden 過(guò)渡到 visibility:visible ，則是立即顯示，沒(méi)有延時(shí)。
注意
上面這個(gè)例子只能是從 visibility:visible 過(guò)渡到 visibility:hidden，不能從 visibility:hidden 過(guò)渡到 visibility:visible 。
當(dāng)元素是 visibility:hidden; 時(shí)，自身的事件不會(huì)觸發(fā)，所以像上面這個(gè)例子中，直接在藍(lán)色塊div元素 上加 hover 事件，要去將自身的 visibility:hidden 過(guò)渡到 visibility:visible 是不會(huì)起作用的。
但是在其他元素上加事件，來(lái)將該元素的 visibility:hidden 過(guò)渡到 visibility:visible 是可以的，看例子。

display 不僅不支持transition，它還會(huì)使 transition 失效。舉個(gè)例子看看

可以看出用了display，支持 transition 的 opacity 屬性也沒(méi)起作用。

這是因?yàn)?b>display:none; 的元素，是不會(huì)渲染在頁(yè)面上的，而 transition 要起作用，元素必須是已經(jīng)渲染在頁(yè)面上的元素，我們可以再來(lái)看個(gè)例子

 
  
  
 
 
    渲染到頁(yè)面
    

    
    
 

給 span 元素綁定事件，點(diǎn)擊它的時(shí)候，才會(huì)把黃色塊div元素，渲染到DOM樹(shù)上，然后改變黃色塊div元素的 opacity 屬性，opacity 是支持 transition 的，而在這段代碼中，并沒(méi)有起作用。
更詳細(xì)的關(guān)于 transition 是否成功 的解讀看這里
渲染樹(shù)決定 transtion 能否成功

要想解決這個(gè)問(wèn)題，我們可以這樣做。
1、把 display 屬性換成 visibility 屬性

2、如果必須要用 display 屬性，我們可以加上定時(shí)器來(lái)解決這個(gè)問(wèn)題