我正在使用 jQuery 使用 CSS 实现我自己的滑动页面转换,并遇到以下问题:
我正在使用 addClass 方法,它在第一次触发链接以将页面动态加载到 div 时起作用。当另一个链接被触发时,页面加载没有过渡。我认为我需要使用 removeClass 方法,但这可以防止转换根本不触发。我尝试了使用这两个类的各种方法,但每次链接被触发时我都无法让它工作。
知道我有什么错误/遗漏吗?
编辑对于那些不理解 CSS 子类的人:
一次可以将多个类添加到匹配元素的集合中,用空格分隔,如下所示:
$("p").addClass("myClass yourClass");
谢谢。
/* --------------- 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;
}