Использование CSS3 переходов: применение начального класса не работает

Question

Я пытаюсь создать слайд-шоу, в котором будут использоваться переходы CSS3, когда они доступны, и классы для анимации между ними. У меня проблемы с установкой начальных значений, из которых можно анимировать.

То, что я пытаюсь сделать, это

• снимите переходы, чтобы двигаться немедленно
• установить класс, необходимый для позиционирования моего элемента
• включить переходы обратно на
• изменяет классы так, чтобы анимация происходила

Код, который я пытался использовать:

item //set initial position
     .css(vP + "transition", "")
     .removeClass('left').removeClass("right").removeClass("center")
     .addClass(toClass)
     //move
     .css(vP + "transition", css3Transition)
     .removeClass(toClass)
     .addClass('center');

Однако начальный класс, похоже, не применяется.

Пример в действии здесь http://jsfiddle.net/EcvBP/31/

Как бы я применил этот класс (чтобы элементы перемещались до перехода)?

Answer 1

Следуя указателю Гербена, я смог заставить его работать, рабочий код включен в приведенную ниже ссылку, решением было немного задержать переход.

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/

Answer 2

Я не думаю, что jQuery может добавить свойства CSS в формате, который вы написали.Вы можете просто написать класс css, например

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

, а затем использовать addClass ('transition') и removeClass ('transition') для добавления и удаления переходов.

В качестве альтернативы, попробуйте просто "переход" вместо префикса браузера, как вы использовали, хотя, опять же, не уверены, что он действительно работает.

РЕДАКТИРОВАТЬ: Только что увидел, что вам нужна скорость анимации.Возможно, вам придется использовать такой плагин, как plugins.jquery.com/plugin-tags/css3-transitions