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.
我整理了一个由两页组成的 柱塞 (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屋!