jQueryの/ CSSは、フェードインを追加して、私は次のようになり3つのCSSクラス作った効果

Question

フェードアウト：ユーザーが何かが起こっているのを知っているので、私はエンドユーザーに表示するのonclick jQueryのイベントの際に

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(255, 255, 255, .8) url('') 50% 50% no-repeat; 
    background-image: url('../../images/gears.svg'); 
} 

body.loading { 
    overflow: hidden; 
} 

    body.loading .modal { 
     display: block; 
    } 

を。

ここで気に入らないのは、読み込みが非常に強く現れ、表示されるときと消えるときに滑らかさがないことです。私は、ユーザーに負荷ギアを表示するために行うことです。その後、

$body = $("body"); 

そして、それを表示するには：

$body.addClass("loading"); 

たり、それを削除するには：

$body.removeClass("loading"); 

どのようにスムーズな移行を追加することができますjQueryやCSSを使ってロードギアが表示されたり消えたりするので、アニメーションがよりフレンドリーに見えますか？

誰かが私を助けることができますか？

Answer 1

私はdisplay: noneを削除します。その後、CSSのトランジションを使用してコンテナをフェードインします。また、クラスをボディの代わりにモーダルに追加することもできます。 opacityまたはvisibilityとは別にCSSトランジションを使用してから

.loader { 
    visibility: hidden; 
    opacity: 0; 
} 

.loader.visible { 
    opacity: 1; 
    visibility: visible; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

Answer 2

あなたもちょうどローダーを隠す/表示するためのjQueryを使用することができます。 ZachのCSSソリューションはシンプルでパフォーマンスの高いものをお勧めしますが、これは別の方法です。

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(255, 255, 255, .8) url('') 50% 50% no-repeat; 
    background-image: url('../../images/gears.svg'); 
} 
body.loading { 
    overflow: hidden; 
} 

$('body').addClass('loading'); 

/* fade loader in */ 
$('.modal').fadeIn('fast'); 

/* fade loader out */ 
$('.modal').fadeOut('fast', function() { 
    $('body').removeClass('loading'); 
});