Heim > Web-Frontend > HTML-Tutorial > 深入理解CSS元素可见性visibility_html/css_WEB-ITnose

深入理解CSS元素可见性visibility_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:23:29
Original
1550 Leute haben es durchsucht

× 目录 [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:在表格中

或中使用,表示该列或列组的所有单元格不显示。如果用于非表格元素,collapse与hidden含义相同

  [注意]webkit内核浏览器不支持给

或 元素使用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;}
Nach dem Login kopieren

  visibility配合opacity和transtion可以实现真正的元素淡入淡出。如果只用opacity时,即使最后元素opacity变为0,但实现上该图片还是可以覆盖其他元素以及可以接受js效果。所以使用visibility可以实现元素真正的隐藏

#oShow{    visibility: visible;    opacity: 1;    transition: 1s;}#oShow:hover{    visibility: hidden;    opacity: 0;}
Nach dem Login kopieren

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时
Nach dem Login kopieren

  [注意]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;}    
Nach dem Login kopieren

<div class="box">    <div id="div"></div></div>
Nach dem Login kopieren

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);
Nach dem Login kopieren

【2】页面切换来控制音乐的播放和暂停

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

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);
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage