×
目录
[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);