深入理解CSS元素可見度visibility，cssvisibility

深入理解CSS元素可見度visibility，cssvisibility
×目錄[1]定義 [2]屬性 [3]display[4]JS[5]transition [6]API[7]DEMO前面的話

　　visibility屬性常見於與display屬性的比較中。但實際上，該屬性有自己的一些有趣的用途。本文將就visibility屬性作詳細整理和說明

 

定義

visibility

　　值: visible | hidden | collapse | inherit

　　初始值: visible

　　應用於: 所有元素

　　繼承性: 有

 

屬性

　　visible: 元素可見

　　hidden:元素不可見，但元素還是會影響文檔的布局

　　[注意]可以將一個hidden元素的後代元素置為visible，這會使該後代元素正常出現

　collapse:在表格中<col>或<colgroup>中使用，表示該列或列組的所有儲存格不顯示。如果用於非表格元素，collapse與hidden含義相同

　　[注意]webkit核心瀏覽器不支援給<col>或<colgroup>元素使用collapse屬性

 

display

　　visibility:hidden與display:none作為隱藏元素的兩種方式，常常被人們拿來比較。其實區別很簡單，前者不脫離文檔流，保留隱藏之前元素佔據的物理地區；而後者則脫離文檔流，如果重新顯示則需要頁面的重新繪製

 

JS

　　當元素通過設定visibiliy:hidden之後，雖然還佔據物理地區，但已經不可以接受js效果

　　//js效果:當滑鼠移入元素時，父級的背景顏色變成黑色；移出時背景顏色恢複初始值

 

transition

　　其實visibility是離散步驟，在0到1數字範圍之內，0表示隱藏，1表示顯示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。於是，visibility應用transition等同於0~1之間的過渡效果。實際上，只要visibility的值大於0就是顯示的。由於這個現象，我們可以利用transition實現元素的延時顯示隱藏

#oShow{    visibility: visible;    transition: visibility 0.2s  0.5s;}#oShow:hover{    visibility: hidden;}

　　visibility配合opacity和transtion可以實現真正的元素淡入淡出。如果只用opacity時，即使最後元素opacity變為0，但實現上該圖片還是可以覆蓋其他元素以及可以接受js效果。所以使用visibility可以實現元素真正的隱藏

#oShow{    visibility: visible;    opacity: 1;    transition: 1s;}#oShow:hover{    visibility: hidden;    opacity: 0;}

 

API

　　當前瀏覽器大部分都是多tab頁(多標籤頁)的模式，但這些頁面效能卻參差不齊。對於某些效能很差的頁面，當使用者從其他tab頁切換回來時，有可能出現由於頁面效能差出現頁面錯亂、頁面卡死甚至瀏覽器卡死的情況

　　HTML5新增了頁面可見度API。該API有兩個屬性，一個事件

　　[注意]IE9-和safari瀏覽器不支援。所以可以通過document.hidden !== 'undefined'來做瀏覽器的識別

　　document.hidden: 表示當前頁面是否可見

　　　　當前tab頁處於啟用態時，document.hidden的屬性值是false，否則是true

　　document.visibilityState: 返回當前頁面的可見狀態

hidden: 當瀏覽器最小化、切換tab、電腦鎖屏時visible: 使用者正在查看當前頁面時prerender: 文檔載入離屏或者不可見unloaded: 當文檔將要被unload時

　　[注意]prerender和undloaded不是所有瀏覽器都支援，用的也不多

　　visibilitychange事件: 當document.visibilityState狀態變化時觸發該事件

應用情境

　　[1]當頁面屬性是hidden時，停止頁面中選項卡的定時器或頁面中的動畫等，減少記憶體佔用

　　[2]當通過頁面狀態的切換，來控制音樂或視頻的播放或停止

　　[3]...

 

DEMO

【1】頁面為非啟用頁時，暫停頁面中的動畫；重新啟用時，繼續動畫效果

.box{    width: 500px;    background-color: lightgreen;    border: 1px solid black;}@keyframes loop{    0%{        width: 100px;    }    100%{        width: 500px;    }}#div{    width: 100px;    height: 100px;    background-color: pink;    animation: loop 200s alternate infinite linear;}    

<div class="box">    <div id="div"></div></div>

function getCSS(obj,style){    if(window.getComputedStyle){        return getComputedStyle(obj)[style];    }    return obj.currentStyle[style];};var oTimer = setInterval(function(){    document.title=div.innerHTML = parseInt(getCSS(div,'width'));},100);document.addEventListener('visibilitychange',function(){    if(document.hidden){        div.style.animationPlayState = 'paused';    }else{        div.style.animationPlayState = 'running';    }    },false);

【2】頁面切換來控制音樂的播放和暫停

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls ></audio>

var mark;document.addEventListener('visibilitychange',function(){    if(document.hidden){        //如果使用者在切換頁面前，自己點了暫停        if(audio.paused){            mark = false;        }else{            audio.pause();            mark = true;        }        }else{        //當暫停是因為頁面切換造成的，則返回當前頁面時，繼續播放        if(mark){            audio.play();        }        }},false);