不同的显示隐藏

在网站开发中，也遇到过很多关于显示隐藏的，说来也简单，今天也有空，整理一下

display

　　对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

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

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';
}

hidden

今天查了一下相关文档才对hidden有了一个相对比较清晰的认识：
hidden是HTML的一个全局属性，专门用与隐藏显示元素，与display:none类似，元素使用是脱离文档流，无法介绍js事件

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试文字</div>

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

opacity

opacity的好处是opacity:0;的时候，依然是可以介绍js事件的，这是display:none;hidden: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>

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

overflow

css中的overflow:hidden；是表示超出的部分隐藏，同样可以利用父级的overflow:hidden,配合height:0;widht:0;来实现显示隐藏。

注意的是overflow的元素在设置绝对定位 元素和其包含块之间的时候，overflow会失效

#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}

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

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

clip

css的clip在平时用的也不多。存在了就学习一哈吧(心态不是很好…)
看看最最最全面的文档，我大MDN(世界上最好的文档-个人语录)是这样说的：

The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.

换句话说就是clip的元素只能应用在absolute或者是fixed的元素上；

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试内容</div>   

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

transform

transform是css3一些效果的集合，主要是移动，旋转，缩放，倾斜，四种基本的操作，还可以是设置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> 

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

2：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>

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

3：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>

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

来个鸡贼的方法before：
利用定位元素可以覆盖文档流的方式，伪元素的before伪元素设置相同的大小，通过控制伪元素的定位属性，实现隐藏显示的效果。

<div style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试内容</div>

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

还有更多的方法，有些方法在项目中可能是用不到，算是总结一些思路了。