带动画的jQuery的addClass removeClass

Question

SEE MY ANSWER BELOW

I'm implementing my own sliding page transition with CSS using jQuery and having the following issue:

I'm using the addClass method and it works the first time a link is fired to load a page dynamically into the div. When another link is fired, the page loads without the transition. I figured it was that I need to use the removeClass method but this prevents the transitions from not fireing at all. Iv'e tried various ways of using the two classes but I cant get it to work every time a link is fire.

Any idea to what I have wrong/missing?

EDIT For those who doesnt under stand the CSS subClass:

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

$("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');
};

IF i WRITE THE CODE AS SAID BELOW, IT WORKS EXACTLY THE SAME (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');
};

the 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

I figured it out:

Binding the .addClass('slide out') method with webkitAnimationEnd event, followed by a return statement, fires the second transition when the first has completed. When this event fires, it removes all classes from the original page. Remembering to unbind the webkitAnimationEnd event prevents adding on extra handlers to the new page so the process can start again when we need it. Thus jQuery's removeClass() method is not needed.

The new page transition method.

/* --------------- 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 class should not include any spaces...

ie:

slide out, should be slide-out, or slide_out or slideOut

Try removing the spaces and fixing the classes in the css to Match.