CSS 要素の可視性についての深い理解 Visibility_html/css_WEB-ITnose

× カタログ [1] 定義 [2] 属性 [3] 表示 [4] JS [5] 遷移 [6] API [7] デモ

前の単語

visibility 属性は、display 属性とよく比較されます。しかし実際には、このプロパティには独自の興味深い用途がいくつかあります。この記事では、visibility 属性について詳しく整理して説明します

Definition

visibility

Value:visible | hidden

Attribute

Visible:要素が表示されます

隠し：ザ要素は表示されませんが、その要素はドキュメントのレイアウトに影響します

[注] 非表示の要素の子孫要素を表示に設定すると、子孫要素が表示されます 通常表示されます

折りたたみ: 使用テーブル内の または は、列または列グループ内のすべてのセルが表示されないことを示します。 table 要素以外に使用する場合、collapse と hidden は同じ意味になります

[注意] WebKit カーネル ブラウザは、 要素または 要素の Collapse 属性の使用をサポートしません

display

visibility:hiddenとdisplay:noneは、要素を非表示にする2つの方法としてよく比較されます。実際、違いは非常に単純です。前者はドキュメント フローから切り離されず、非表示になる前に要素が占有していた物理領域を保持します。一方、後者はドキュメント フローから切り離され、再表示される場合はページが必要になります。 :hidden の後、物理領域を占有していますが、js 効果は受け入れられなくなりました

//js 効果: マウスが要素内に移動すると、親の背景色が黒になります。実際、可視性は 0 から 1 の範囲内で離散的なステップであり、0 は非表示、1 は表示を意味します。可視性:非表示は可視性:0 として表示され、可視性:可視は可視性:1 として表示されます。したがって、可視性アプリケーションの遷移は、0 と 1 の間の遷移効果と同等です。実際、可視性の値が 0 より大きい限り、表示されます。この現象により、トランジションを使用して要素の遅延表示と非表示を実現できます

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

可視性と不透明度とトランジションを組み合わせることで、真の要素のフェードインとフェードアウトを実現できます。不透明度のみを使用する場合、最後の要素の不透明度が 0 になっても、画像は他の要素を覆い、js 効果を受け入れることができます。したがって、可視性を使用すると要素を本当に隠すことができます

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

API

現在のブラウザのほとんどはマルチタブページ（マルチタブページ）モードですが、これらのページのパフォーマンスは均一ではありません。パフォーマンスが低い一部のページでは、ユーザーが他のタブ ページから切り替えると、ページが混乱したり、ページがフリーズしたり、ページのパフォーマンスが低いためにブラウザがフリーズしたりすることがあります。

HTML5 では、新しいページ表示 API が追加されました。 API には 2 つのプロパティ、1 つのイベントがあります

【注意】IE9- および Safari ブラウザではサポートされていません。したがって、document.hidden !== 'unknown' を使用してブラウザを識別できます

Document.hidden: 現在のページが表示されているかどうかを示します

現在のタブページがアクティブな場合、document.hiddenの属性値はfalseです。それ以外の場合は true です

document.visibilityState: 現在のページの可視性ステータスを返します

hidden: 当浏览器最小化、切换tab、电脑锁屏时visible: 用户正在查看当前页面时prerender: 文档加载离屏或者不可见unloaded: 当文档将要被unload时

[注] prerender と undloaded はすべてのブラウザでサポートされているわけではなく、あまり使用されません

visibilitychange イベント: ドキュメントのときにトリガーされます。 VisibilityState 状態変化 イベント

アプリケーションシナリオ

[1] ページ属性が非表示の場合、ページ内のタブのタイマーやページ内のアニメーション等を停止し、メモリ使用量を削減します

[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);