Deep understanding of CSS element visibility visibility

xTable of Contents [1] defines [2] property [3]display[4]js[5]transition [6]api[7]demo Front words

The visibility property is common in comparisons to display properties. But in fact, the property has some interesting uses of its own. This article will detail and explain the visibility attributes.

Defined

Visibility

Value: Visible | Hidden | Collapse | Inherit

Initial value: Visible

Applies to: all elements

Inheritance: There are

Property

Visible: Element Visibility

Hidden: The element is not visible, but the element still affects the layout of the document

[note] You can place a descendant element of a hidden element as visible, which causes the descendant element to appear normally

Collapse: Used in <col> or <colgroup> in a table to indicate that all cells in the column or column group are not displayed. If used for non-tabular elements, collapse and hidden mean the same

[Note that the]webkit kernel browser does not support the use of the collapse property for <col> or <colgroup> elements

Display

Visibility:hidden and Display:none as hidden elements in two ways, often by people to compare. In fact, the difference is simple, the former is not out of the document flow, preserving the physical area occupied by the previous element, while the latter is out of the document flow, if re-display will require the page redraw

Js

The JS effect cannot be accepted when the element is still occupying the physical area after it has been set Visibiliy:hidden

JS Effect: The parent's background color turns black when the mouse moves into the element, and the background color restores the initial value when moving out

Transition

In fact, visibility is a discrete step, within the range of 0 to 1 digits, 0 means hidden, and 1 is displayed. Visibility:hidden can be regarded as visibility:0;visibility:visible can be regarded as visibility:1. Thus, visibility applies transition equivalent to the transition effect between 0~1. In fact, as long as the value of visibility is greater than 0, it is displayed. Due to this phenomenon, we can use transition to realize the delay of the element display hidden

#oShow {    visibility: visible;     transition: visibility 0.2s  0.5s;} #oShow: Hover {    visibility: hidden;}

Visibility mates with opacity and transtion can achieve true element fading. If you use only opacity, even if the last element opacity becomes 0, the implementation of the picture can overwrite other elements and can accept the JS effect. So using visibility can make the element really hidden

#oShow {    visibility: visible;     opacity: 1;     transition: 1s;} #oShow: Hover {    visibility: hidden;     opacity: 0;}

Api

Most of the current browsers are multi-tab (Multi-tab) mode, but the performance of these pages is uneven. For some poorly performing pages, when a user switches back from another tab page, there is a chance that the page will be garbled due to poor page performance, the page is stuck, or even the browser is dead.

HTML5 added the page visibility API. The API has two properties, one event

Note Ie9-and Safari browsers are not supported. So you can do the browser recognition by Document.hidden!== ' undefined '.

Document.hidden: Indicates whether the current page is visible

The Document.hidden property value is false when the tab page is active, otherwise true

Document.visibilitystate: Returns the visible state of the current page

Hidden: When the browser is minimized, Switch tab, the Computer lock screen visible: The user is viewing the current page PreRender: Document loading off-screen or invisible unloaded: When the document is going to be unload

[Note that]prerender and undloaded are not supported by all browsers and are not used much

　　Visibilitychange Event: This event is triggered when the document.visibilitystate state changes

Application Scenarios

[1] When the page property is hidden, stop the page tab of the timer or animation in the page, etc., Reduce memory consumption

[2] When the page status of the switch, to control the music or video playback or stop

\3: ...

DEMO

When the "1" page is inactive, the animation on the page is paused, and the animation effect resumes when reactivated

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

<class= "box">    <id= "div"  ></div></div>

functionGetcss (obj,style) {if(window.getComputedStyle) {returngetComputedStyle (obj) [style]; }    returnObj.currentstyle[style];};varOtimer = SetInterval (function() {Document.title=div.innerhtml = parseint (getcss (Div, ' width ')));},100);d Ocument.addeventlistener (' Visibilitychange ',function(){    if(Document.hidden) {div.style.animationPlayState= ' Paused '; }Else{div.style.animationPlayState= ' Running '; }    },false);

"2" page toggle to control music playback and pause

<id= "audio"  src= "http://7xpdkf.com1.z0.glb.clouddn.com/ Myocean.mp3 "></audio>

varMark;document.addeventlistener (' Visibilitychange ',function(){    if(Document.hidden) {//If the user is in front of the switch page, he points a pause        if(audio.paused) {Mark=false; }Else{audio.pause (); Mark=true; }        }Else{        //resumes when the current page is returned when the pause is caused by a page switch        if(Mark) {Audio.play (); }        }},false);

Deep understanding of CSS element visibility visibility