遷移がdisplay_html/css_WEB-ITnoseを満たすとき-htmlチュートリアル-php.cn

遷移がdisplay_html/css_WEB-ITnoseを満たすとき

WBOY

リリース： 2016-06-21 09:00:06

オリジナル

1091 人が閲覧しました

CSS3 アニメーションを試すときに、js アニメーションよりも高速で使いやすい、transition 属性を使用したことがあると思います。コードは次のとおりです。 HTML 構造:

<div id="box"></div><button>动画按钮</button>

ログイン後にコピー

CSS コード:

.box {    background: goldenrod;    width: 300px;    height: 300px;    margin: 30px auto;    transition: all .4s linear;    /*display: block;*/}.hidden {    /*display: none;*/    opacity: 0;}

ログイン後にコピー

JS コード

var box = $('#box');$('button').on('click', function () {    if(box.hasClass('hidden')){        box.removeClass('hidden');    }else{        box.addClass('hidden');    }});

ログイン後にコピー

ボタンをクリックすると、CSS コードの表示属性の 2 つの段落のコメントを解除してブラウザを開くと、フェードインとフェードアウトのアニメーション効果が表示されます。フェードインとフェードアウトの効果はなくなります。これは単純に破壊的な効果なので、いくつかの方法をまとめました。

最初の方法: 表示を可視性で置き換えます。可視性の効果が実際には表示とある程度似ていることは誰もが知っていますが、なぜある程度似ていると言われるのですか。スペース? であれば、この方法で使用することと不透明性との間に違いはないと言うでしょう。ただし、ボタンクリックイベントなどの基礎となるレイヤーのブロックを回避できます。

2 番目のメソッドは、最初のメソッドからの進歩です。これは、js の setTimout およびtransitionend イベント CSS コードを使用して、クラスの非表示クラスの不透明度を分離します。

CSS コード:

.box {    background: goldenrod;    width: 300px;    height: 300px;    margin: 30px auto;    transition: all .4s linear;    visibility: visible;}.hidden {    display: none;}.visuallyhidden {    opacity: 0;}

ログイン後にコピー

js コード

var box = $('#box');$('button').on('click', function () {    if (box.hasClass('hidden')) {        box.removeClass('hidden');        setTimeout(function () {            box.removeClass('visuallyhidden');        }, 20);    } else {        box.addClass('visuallyhidden');        box.one('transitionend', function(e) {            box.addClass('hidden');        });    }});

ログイン後にコピー

3 番目のメソッドは 2 番目のメソッドと似ていますが、setTimeout の代わりに requestAnimationFrame を使用します。それに応じて、場合の条件。 requestAnimationFrame は実際には setTimeout/setInterval に似ていますが、同じメソッドを再帰的に呼び出して画像を継続的に更新してアニメーションの効果を実現しますが、アニメーション専用にブラウザーによって提供される API であるという点で setTimeout/setInterval よりも優れています。ブラウザーはメソッド呼び出しを自動的に最適化し、ページがアクティブでない場合はアニメーションが自動的に一時停止されるため、CPU オーバーヘッドが効果的に節約されます。

js コードは次のとおりです

var box = $('#box');$('button').on('click', function () {    if (box.hasClass('hidden')) {        box.removeClass('hidden');        requestAnimationFrame(function(){            box.removeClass('visuallyhidden');        });    } else {        box.addClass('visuallyhidden');        box.one('transitionend', function(e) {            box.addClass('hidden');        });    }});

ログイン後にコピー

上記は、遷移と表示が出会うときに遭遇する落とし穴です。