元素顯示隱藏的9種思路

前面的話

　　在網頁制作中，元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的9種思路

 

display

　　對於元素顯隱來說，最常見就是display:none | display:block，但是使用這種方法有個問題，元素的display屬性在隱藏前並不都是block，還有可能是inline、inline-block等

　　[注意]如果要適用於任何元素需要提前儲存元素的display值

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</div>

<script>
show.onclick = function(){
    test.style.display = 'block';
}    
hide.onclick = function(){
    test.style.display = 'none';
}
</script>    

 

visibility

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

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

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}
</script>

 

hidden

　　可能有些人不太熟悉，HTML有個hidden全局屬性，專門用於顯示隱藏元素，與display:none的作用類似，元素隱藏時脫離文檔流，無法接受javascript事件

　　[注意]IE10-不支持test.hidden='hidden'寫法，只支持test.setAttribute('hidden','hidden')寫法

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</div>

<script>
show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
</script>    

 

opacity

　　對於元素顯隱，opacity的使用頻率也挺多。opacity的好處是，即使opacity為0的元素，仍然可以接受javascript事件，這是display:none和visiblity:hidden所不具備的。

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<button id="reset">還原</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}
</script>    

 

overflow

　　CSS中有一個屬性是overflow，overflow:hidden代表着溢出隱藏。我們可以利用父級的overflow:hidden配合父級的height:0或width:0來實現元素的顯隱

　　[注意]當設置overflow的元素在絕對定位元素和其包含塊之間的時候，overflow屬性會失效

<style>
#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}
</style>

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="testWrap">
    <div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</div>        
</div>

<script>
show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}
</script>    

 

clip

　　CSS裁剪clip這個屬性平時用的不多，當clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時，可實現元素的隱藏效果，效果類似於visibility:hidden

　　[注意]clip屬性只能應用在絕對定位元素上

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</div>    

<script>
show.onclick = function(){
    test.style.position ='static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position ='absolute';
    test.style.clip = 'rect(0 0 0 0)';
}
</script>    

 

transform

　　CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更復雜的效果。通過不同的變形函數可以實現元素顯隱效果

　　[注意]IE9-瀏覽器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前綴

【1】scale

　　transform:scale(0)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>    

<script>
show.onclick = function(){
    test.style.transform ='scale(1)';
}    
hide.onclick = function(){
    test.style.transform ='scale(0)';
}
</script>    

【2】rotate

　　transform:rotateX(90deg)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform ='rotateX(90deg)';
}
</script>

【3】skew

　　transform:skew(90deg)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='skew(0)';
}    
hide.onclick = function(){
    test.style.transform ='skew(90deg)';
}
</script>

 

覆蓋

　　利用定位元素可以覆蓋普通流元素的特性。為元素的before偽元素設置相同的尺寸，通過控制偽元素的定位屬性，實現顯隱效果

<style>
#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}    
</style>

<div style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</div>

//鼠標移入移出會出現元素的顯隱效果

 

偏移

　　元素顯示隱藏的另一種常見思路是偏移，將元素移動到視窗范圍外，也可以實現等價的顯隱效果

【1】margin-top

　　利用負margin將元素移出視窗外，要注意的是設置負margin的元素並沒有脫離普通流，后續元素會跟着一起移動

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>

<script>
show.onclick = function(){
    test.style.marginTop ='10px';
}    
hide.onclick = function(){
    test.style.marginTop ='-9999px';
}
</script>

【2】left

　　通過設置相對定位或絕對定位元素的偏移屬性，將元素移動到視窗外

<style>
#test{
    position: relative;
/*  position: absolute; */
}    
</style>

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>    

<script>
show.onclick = function(){
    test.style.left ='0';
}    
hide.onclick = function(){
    test.style.left ='-9999px';
}
</script>    

【3】translate

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>    

<script>
show.onclick = function(){
    test.style.transform ='translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform ='translate(-9999px,-9999px)';
}
</script>