深入理解CSS元素可見性visibility

前面的話

　　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作為隱藏元素的兩種方式，常常被人們拿來比較。其實區別很簡單，前者不脫離文檔流，保留隱藏之前元素占據的物理區域；而后者則脫離文檔流，如果重新顯示則需要頁面的重新繪制。還有一點區別卻很少人提到，如果父級設置display:none;子級設置display:block也不會顯示；而如果父級設置visibility:hidden;子級設置visibility:visible時子級會顯示出來

 

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);