jQuery / CSS添加淡入和淡出效果

Question

我做了3个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.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

除了使用具有opacity或visibility CSS过渡之外，您还可以仅使用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');
});