Question

我刚刚发现了 Barba.js ，发现它非常有用。它提供了同一网站的URL之间的平滑过渡。

在jQuery的json=payload1和{的帮助下，我整理了一个由两个页面（index.html和about.html）组成的 Plunker {1}}个方法。

fadeIn()

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

如何消除此间隔，以使过渡更平滑？ “平滑”是指类似于 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();
});

Answer 2

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

注意：这只是刺中的一个，塞子很有用，但是很难看到动画的效果。

更新

我认为您需要上述类似的东西，但是如果您想要淡入/淡出黑色，那么您还需要做一些事情，例如围绕体内的所有内容创建一个div包装器，然后div的应用程序背景色＃eff3f6，然后将实际主体背景设为黑色。您将需要做一些工作来获得所需的确切效果，但是类似的操作或下面注释中的SO链接应该会有所帮助。

Answer 3

我想到了这个版本的脚本：

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

更好，但不够平滑。查看对 real life project 的效果。我该如何改善？

jQuery：消除动画之间的白屏“暂停”

3 个答案: