jQuery:消除白屏“暂停"动画之间 [英] jQuery: eliminate white screen "pause" between animations

问题描述

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

I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.

我整理了一个 Plunker 由两页组成(index.html 和 about.html) 在 jQuery 的 fadeIn() 和 fadeOut() 方法的帮助下顺利加载.

I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery’s fadeIn() and fadeOut() methods.

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

这个动画的问题在于它们之间存在白屏间隔.

The problem with this animations is that there is a white screen interval between them.

我怎样才能消除这个间隔，使过渡更平滑?更流畅"是指类似于这个(点击查看案例").

How could I eliminate this interval, to make the transition smoother? By "smoother" I mean similar to this one (click "view case").

推荐答案

白色屏幕是主体颜色，因为您使用的是 promise().done(..) jquery 在 fadeOut 完成后应用 fadeIn 以便显示主体颜色.因此，这是一个类似于您所拥有的示例:

The white screen is the body color because you're using promise().done(..) jquery apply the fadeIn after the fadeOut finish so the body color will appear. So, this is an example sort of similar to what you have:

<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(..).

like you see in the example above the white screen also appears so if you don't want that just don't use promise().done(..).

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

您可以像这样编辑代码:

you can edit your code like this:

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

这篇关于jQuery:消除白屏“暂停"动画之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！