的jQuery/CSS添加淡入和淡出我做了這看起來像這樣3個CSS類效果

Question

：

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

在jQuery的事件的onclick我展示給最終用戶，以便用戶知道的東西是怎麼回事。

我在這裏不喜歡的是，加載顯示非常強制，當它出現時和消失時，沒有平滑過渡。我要做的，以顯示加載齒輪用戶：

$body = $("body"); 

然後以顯示它：

$body.addClass("loading"); 

或者將其刪除：

$body.removeClass("loading"); 

如何添加平滑過渡什麼時候加載齒輪出現和消失使用jQuery或CSS，使動畫看起來更友好？

有人可以幫我嗎？

Answer 1

我會刪除display: none然後只需使用一個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

除了使用CSS過渡與opacity或visibility你也可以只使用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'); 
});