分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery：消除动画之间的白屏“暂停”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

$(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(点击“查看案例”).

解决方法

如何使用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,fadeInTimE);

      },fadeOutTime - overlapTimE)

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