フロントエンドtips

皆さんはcss 3アニメを試してみて、きっとtransion属性を使ったことがあると思います.jsアニメよりも使いやすいです.コードは以下の通りです.HTML構造:

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コードからdisplay属性に対する2つのコメントを解除した後、ブラウザを開けてみたらフェードアウトの効果はありません.これはまったく破壊的な役割です.そして、娘にいくつかの方法をまとめました.
第一の方法:displayをvisibilityで代用して、みんなはvisibilityの効果がdisplayとある程度似ていることを知っています.なぜある程度似ていると言っていますか?まだスペースを占めていますので、このように使うのはopacityと同じです.しかし、ボタンのような下のレイヤーのクリックイベントをブロックすることは避けられます.
第二の方法は、第一の方法の進歩に対して、jsのsetTimoutとtrantionndイベントcssコードを利用して、class hidden類のopacityを分離することである.
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');
        });
    }
});

第三の方法は第二の方法と似ています.request AnimationFrameでsetTimeoutを置換します.対応してif条件のjsを修正しました.request AnimationFrameは、setTimeout/setIntervalとほぼ同じです.再帰的に同じ方法を呼び出して、絶えず画面を更新して動きの効果を達成しますが、setTimeout/setIntervalより優れているところは、ブラウザがアニメーションのために提供するAPIであり、運行時にブラウザが自動的に最適化されます.アニメーションは自動的に停止し、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');
        });
    }
});

以上がtransionがdisplayに遭遇した時のピットです.