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

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

我怎样才能消除这个间隔，使过渡更平滑？ 通过“更流畅”，我的意思与此类似（点击“查看案例”） 。

Answer 1

白色屏幕是正文颜色，因为你正在使用promise().done(..) jquery在fadeOut完成后应用fadeIn ，这样就会出现正文颜色。 所以，这是一个类似于你的例子：

就像你在上面的例子中看到的那样，白色屏幕也会出现，所以如果你不想这样就不要使用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(); }); 

注意：这只是一个刺，它是有用的，但很难看到动画在行动。

UPDATE

我认为你需要像上面这样的东西，但是如果你想淡入/淡出黑色，那么你也会想要做一些事情，比如在你体内的所有内容周围创建一个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(); }); 

它更好，但不够流畅。 查看对现实生活项目的影响 。 我怎样才能改进它？