jQuery：消除白色屏幕“；暂停“；动画之间

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

在jQuery的

fadeIn（）

和

fadeOut（）

方法的帮助下，我创建了一个由两个页面（index.html和about.html）组成的，可以顺利加载

$(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();
});

这个动画的问题是它们之间有一个白色的屏幕间隔

---

如何消除此间隔，使过渡更平滑？我所说的“更平滑”是指类似于（单击“查看案例”）

如何使用

setTimeout（）

重叠淡出和淡入？这应该可以防止它完全消失，这是我们想要避免的

您可以尝试以下方法：

$(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;

      // manipulate these values
      let fadeOutTime = 1000;
      let fadeInTime = 1000;
      let overlapTime = 100;

      $(this.oldContainer).fadeOut(fadeOutTime);

      // use setTimeout() to begin fadeIn before fadeOut is completely done
      setTimeout(function () {
        nc.css('visibility', 'visible');
        nc.fadeIn(fadeInTime, function() {
          _this.done();
        });

        $('html, body').animate({
          scrollTop: 300
        }, fadeInTime);

      }, fadeOutTime - overlapTime)

    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

注意：这只是一个尝试，plunker很有帮助，但很难看到动画的实际效果

更新

---

我想你需要像上面这样的东西，但是如果你想淡入/淡出黑色，那么你还需要做一些事情，比如在你身体内的所有内容周围创建一个div包装，并给这个div应用程序的背景色#eff3f6，然后将实际的身体背景变成黑色。你需要做一些工作来获得你想要的确切效果，但类似的事情或下面评论中的SO链接应该会有所帮助。

白色屏幕是身体颜色，因为你正在使用

promise（）。完成（…）

jquery

在

淡出后应用
fadeIn
使身体颜色显示出来。因此，这是一个类似于您的示例：

<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>

您可以按如下方式编辑代码：

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

我拿出了这个版本的剧本：

$(function(){
    var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      var _this = this;
      nc.css('visibility', 'visible');
      nc.show().promise().done(() => {
        $(this.oldContainer).fadeOut(50);
        if (!isMobile.any()) {
          $('html, body').delay(100).animate({
            scrollTop: 200
          },700);
        }
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

它更好，但不够光滑。请参见上的效果。如何改进它？
如果您还没有弄明白，我明天会看一看。我所说的“更平滑”是指类似于（等待2、3秒，然后单击“查看案例”）。我的意思是，一种“无形的过渡”。你的意思是它在黑色中淡入淡出，而不是白色？或者在某个方向淡入/淡出？我正在寻找与我向您展示的地址相同的效果。我不知道怎么做。这可能有用。我怎样才能淡入黑色？是的，这是一个美丽的效果。然而，开发一个完整的解决方案来提供完全相同的功能特性将超出StackOverflow的目的。我想看看StackOverflow，以及其他类似的问题。这将引导您朝着正确的方向前进，但您必须将精确的解决方案组合在一起。另外，您是否检查了您喜欢的页面上的源代码和html？你应该可以通过检查找到他们在做什么。这是我们的目标。我使用了你提供的脚本。点击“Studiu de caz”查看过渡。它确实改进了很多，但脚本引入了一个错误：单击浏览器的“后退”按钮会破坏主页滑块。除非你有一个完整的工作应用程序的其他部分，如状态管理器或路由器，或两者，正在与本地存储和历史对象同步，那么，是的，像浏览器的后退按钮这样的东西会给你带来麻烦。这是一个相当复杂的功能，你的应用程序将需要更多的工程，使所有这一切成为可能，这是超越范围的一个单一的Q等等。
$(function(){
    var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      var _this = this;
      nc.css('visibility', 'visible');
      nc.show().promise().done(() => {
        $(this.oldContainer).fadeOut(50);
        if (!isMobile.any()) {
          $('html, body').delay(100).animate({
            scrollTop: 200
          },700);
        }
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});