realizar animación CSS3 después de usar jQuery .appendTo

Question

Quiero usar .appendTo() para modificar la posición DOM de un elemento. Una vez que esto esté completo, necesito animar el elemento con CSS3.

El elemento no se animará, sino que se ajustará al nuevo estilo 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); 
} 

que separa las las y los métodos .appendTo().toggleClass() al fuego en dos diferentes eventos de clic. Este método funciona (pero obviamente no es deseado). También intenté usar .delay(1000) después del apéndice, pero esto tampoco funciona.

Answer 1

El problema es que agrega el contenido y alterna la clase al mismo tiempo. Si se quita la llamada .appendTo() funciona bien:

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

Aquí es una demostración: http://jsfiddle.net/38FrD/1/

No estoy realmente seguro de lo que está sucediendo, pero si miras el elemento de imagen en FireBug se puede ver que la La propiedad transition que se agrega tiene una duración de 0s aunque se especificó una duración.

También .delay() solo funciona para colas (como .animate() llamadas).

ACTUALIZACIÓN

Si se coloca la llamada .toggleClass() dentro de una función anónima setTimeout entonces parece que funcione como desee:

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

Aquí es una demostración: http://jsfiddle.net/38FrD/2/