Using CSS3 Transitions: Applying initial class does not seem to work

I am trying to create a slideshow which will use CSS3 Transitions when available and classes to animate between. I am having trouble setting initial values from which to animate from however.

What I am trying to do is

• take off transitions so move is immediate
• set the class needed for the positioning of my element
• turn transitions back on
• changes classes so that animation takes place

The code I was trying to use is

item //set initial position
     .css(vP + "transition", "")
     .removeClass('left').removeClass("right").rem开发者_开发知识库oveClass("center")
     .addClass(toClass)
     //move
     .css(vP + "transition", css3Transition)
     .removeClass(toClass)
     .addClass('center');

However the initial class doesn't seem to be applied.

Example in action is here http://jsfiddle.net/EcvBP/31/

How would I get this class to be applied (so that items are repositioned before the transition)?

Following Gerben's pointer I was able to get it working, the working code is included in the link below, the solution was to delay the transition slightly.

item
    //set inital move from position
    .css(vP + "transition", "")
    .removeClass("left right center")
    .addClass(toClass)
    .delay(10, "doMove").queue("doMove", function(){
        //move
        $(this).css(vP + "transition", css3Transition)
        .removeClass(toClass)
        .addClass("center");
    }).dequeue("doMove");

http://jsfiddle.net/EcvBP/37/

I don't think jQuery can add css properties in the format you've written. You could just write a css class like

.transition {
 -moz-transition: all 0.2s linear;
 -webkit-....
 transition...
}

and then use addClass('transition') and removeClass('transition') to add and remove transitions.

Alternatively, try just "transition" instead of with the browser prefix like you've used, although, again, not sure about it actually working.

EDIT: Just saw that you need tween speed. You might have to use a plugin like plugins.jquery.com/plugin-tags/css3-transitions