выполнить 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() вызовы).

ОБНОВЛЕНИЕ

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

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

Вот демоверсия: http://jsfiddle.net/38FrD/2/