SEE MY ANSWER BELOW
我正在使用jQuery使用CSS实现我自己的滑动页面过渡,并且遇到以下问题:
我正在使用addClass方法,它在第一次触发链接以将页面动态加载到div中时起作用。当另一个链接被触发时,页面加载而没有过渡。我认为这是我需要使用removeClass方法,但这可以防止根本不触发转换。我尝试了使用这两个类的各种方法,但是每次链接出现问题时,我都无法使它正常工作。
对我的错/遗漏有任何想法吗?
编辑对于那些不懂CSS子类的人:
一次可以添加多个类,以空格分隔
匹配元素的集合,如下所示:
$("p").addClass("myClass yourClass");
Taken from the jQuery Docs
thnx。
/* --------------- Handle Page Body Loading ----------------- */
function loadBody(target, gotoURL)
{
$('#' + target)
.addClass('slide out')
.load(gotoURL, function (response)
{
iniScroll('scrollBody', 'bodyScrollContainer');
})
.addClass('slide in')
removeSlideClass();//WITHOUT THIS, IT FIRES ONLY THE FIRST USE!!
};
function removeSlideClass()
{
$('#bodyContent').removeClass('slide in');
$('#bodyContent').removeClass('slide out');
};
如果我按下面的方式写代码,则它的工作原理完全相同(jQuery 101);
function loadBody(target, gotoURL)
{
$('#' + target).addClass('slide out');
$('#' + target).load(gotoURL, function (response)
{
iniScroll('scrollBody', 'bodyScrollContainer');
});
$('#' + target).addClass('slide in');
$('#' + target).removeSlideClass();
};
function removeSlideClass()
{
$('#bodyContent').removeClass('slide in');
$('#bodyContent').removeClass('slide out');
};
CSS:
.out, .in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 650ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
最佳答案
我想到了:
将.addClass('slide out')
方法与webkitAnimationEnd
事件绑定,后跟return语句,当第一个转换完成时,将触发第二个转换。触发此事件时,它将从原始页面中删除所有类。记住取消绑定webkitAnimationEnd
事件可以防止在新页面上添加额外的处理程序,以便在需要时可以重新开始该过程。因此,不需要jQuery的removeClass()
方法。
新的页面过渡方法。
/* --------------- Handle Page Body Loading ----------------- */
function loadBody(target, gotoURL)
{
$('#' + target)
.addClass('slide out')
.bind('webkitAnimationEnd', function(){
$(this).load(gotoURL, function (e)
{
iniScroll('scrollBody', 'bodyScrollContainer');
$('#' + target)
.toggleClass('slide in')
.unbind('webkitAnimationEnd');
});
});
};