addClass removeClass w/jQuery 用于动画

Question

SEE MY ANSWER BELOW

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

我正在使用 addClass 方法，它在第一次触发链接以将页面动态加载到 div 时起作用。当另一个链接被触发时，页面加载没有过渡。我认为我需要使用 removeClass 方法，但这可以防止转换根本不触发。我尝试了使用这两个类的各种方法，但每次链接触发时我都无法让它工作。

知道我有什么错误/遗漏吗？

编辑对于那些不理解 CSS 子类的人：

一次可以添加多个类，以空格分隔，以 匹配元素的集合，如下所示：

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

Taken from the jQuery Docs

谢谢。

/* --------------- 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 类不应包含任何空格...

即：

slide out，应该是slide-out，或者slide_out或者slideOut

尝试删除空格并修复 css 中的类以匹配。