我刚刚发现
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();
});
注意：这只是一个刺,它是有用的,但很难看到动画在行动.
UPDATE
我认为你需要像上面这样的东西,但是如果你想淡入/淡出黑色,那么你也会想要做一些事情,比如在你体内的所有内容周围创建一个div包装器并给它你的应用程序的背景颜色,#eff3f6,然后使实际的身体背景变黑.你将有一些工作来获得你想要的确切效果,但是类似的东西或下面评论中的SO链接应该会有所帮助.
