выполнить анимацию CSS3 после использования jQuery .appendTo

Question

Я хочу использовать .appendTo() для изменения позиции DOM элемента. Как только это будет завершено, мне нужно анимировать элемент с помощью CSS3.

Элемент не будет анимироваться, вместо этого он привязывается к новому стилю CSS.

JavaScript:

$(".run").click(function() { 
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated"); 
}); 

HTML:

<div class="insert"> </div> 
<img src="img/img1.png" class="imageOriginal"/> 

CSS:

.imageOriginal { 
    -webkit-transform: scale(0.1); 
} 
.imageAnimated { 
    -webkit-transition: all 1s ease-in-out;  
    -webkit-transform: scale(1); 
} 

я отделился в .appendTo() и .toggleClass() методы огня по двум различным событиям щелчка. Этот метод работает (но, очевидно, не желателен). Я также попытался использовать .delay(1000) после добавления, но это тоже не сработает.

Answer 1

Проблема в том, что вы добавляете содержимое и затем переключая класс одновременно. Если удалить .appendTo() вызов работает нормально:

$(".imageOriginal").toggleClass("imageAnimated"); 

Вот демо: http://jsfiddle.net/38FrD/1/

Я не совсем уверен, что происходит, но если смотреть на элемент изображения в FireBug вы можете увидеть, что transition Свойство, которое добавляется, имеет продолжительность 0s, хотя была указана продолжительность.

Также .delay() работает только для очередей (например, .animate() звонков).

UPDATE

Если вы поместите .toggleClass() вызов внутри setTimeout анонимной функции, то она, кажется, работает по желанию:

$(".run").click(function() { 
    var $this = $(".imageOriginal"); 
    $this.appendTo('.insert'); 
    setTimeout(function() { 
     $this.toggleClass("imageAnimated"); 
    }, 0); 
}); 

Вот демо: http://jsfiddle.net/38FrD/2/