addClass removeClass w/jQuery for Animations

Question

请参阅下面的答案

我正在使用jQuery实现我自己的CSS滑动页面转换，并遇到以下问题：

我使用的是addClass方法，它在第一次触发链接时起作用，将页面动态加载到div中。当触发另一个链接时，页面加载时不进行转换。我认为我需要使用removeClass方法，但这可以防止转换根本不启动。Ive尝试了使用这两个类的各种方法，但每次链接着火时我都无法使用。

你知道我做错了什么吗？

编辑对于那些不支持CSS子类的人：

一次可以添加多个类，用空格分隔一组匹配的元素，比如：

$("p").addClass("myClass yourClass");

取自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;
}

Answer 1

我发现了：

将.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');
});
});
};

Answer 2

CSS类不应包含任何空格。。。

即：

滑出，应该是滑出，或滑出或滑出

尝试删除空格并将css中的类修复为Match。