代码之家 › 专栏 › 技术社区 › Razvan Zamfir

jquery:消除动画之间的白色屏幕“暂停”

cross-fade fadeout fadein animation jquery

Razvan Zamfir · 技术社区 · 6 年前

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

我把一个 Plunker 由两页(index.html和about.html)组成,在jquerys的帮助下顺利加载 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 (点击“查看案例”) .

3 回复 | 直到 6 年前

Ahmad Salameh 6 年前

白色屏幕是身体的颜色,因为你正在使用 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>

正如您在上面的示例中看到的,白色屏幕也会出现,因此如果您不想这样做,就不要使用 承诺()。完成(…) .

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

Chad Moore 6 年前

使用怎么样 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应用程序的背景色,然后制作实际的身体背景。黑色。你会有一些工作来达到你想要的效果,但是类似的或者在下面评论中的so链接中应该会有所帮助。

Razvan Zamfir 6 年前

我拿出了这个版本的脚本:

$(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 . 我该如何改进?