jQuery:消除动画之间的白屏 "pause"

Question

我刚刚发现 Barba.js 并发现它非常有用。它提供同一网站的 URL 之间的平滑转换。

我整理了一个 Plunker 由两个页面(index.html 和 about.html)组成，借助 jQuery 的 fadeIn() 和 fadeOut() 方法可以顺利加载。

$(document).ready(function() {
  var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      nc.hide();
      var _this = this;
      $(this.oldContainer).fadeOut(1000).promise().done(() => {
        nc.css('visibility', 'visible');
        nc.fadeIn(1000, function() {
          _this.done();
        });
        $('html, body').animate({
          scrollTop: 300
        },1000);
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

此动画的问题在于它们之间存在白屏间隔。

如何消除这个间隔，使过渡更平滑？我所说的“更平滑”是指类似于 this one (点击“查看案例”)。

Answer 1

白色屏幕是主体颜色，因为您正在使用 promise().done(..) jquery 在之后应用 fadeIn fadeOut 完成，主体颜色就会出现。所以，这是一个与您所拥有的类似的示例:

<style type="text/css">
    .One{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #476d80;
        cursor: pointer;
        z-index: 1;
    }
    .Two{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #03A9F4;
        cursor: pointer;
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.one').click(function(){
            $(this).fadeOut(1000).promise().done(function(){
                $('div.Two').fadeIn(1000);
            });
        });
    });
</script>
<div class="One"></div>
<div class="Two"></div>

就像您在上面的示例中看到的那样，也会出现白屏，因此如果您不希望出现这种情况，请不要使用 promise().done(..)。

$(document).ready(function(){
    $('div.one').click(function(){
        $(this).fadeOut(1000);
        $('div.Two').fadeIn(1000);
    });
});

您可以像这样编辑代码:

$(this.oldContainer).fadeOut(1000).promise().done(() => {
    $('html, body').animate({
        scrollTop: 300
    },1000);
});
nc.css('visibility', 'visible');
nc.fadeIn(1000, function() {
    _this.done();
});