jQueryを使ってCSS3アニメーションを実行する.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); 
} 

私は2つの異なるクリックイベントに発射する.appendTo()と.toggleClass()方法を分離しました。このメソッドは機能します（しかし、明らかに望ましくない）。私はまた、追加の後に.delay(1000)を使ってみましたが、これはうまくいきません。

Answer 1

問題は、コンテンツを追加してから同時にクラスを切り替えることです。あなたが.appendTo()呼び出しを削除すると、それが正常に動作します：ここで

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

はデモです： http://jsfiddle.net/38FrD/1/

私は何が起こっているのか本当にわからないが、あなたは放火魔に画像要素を見ればあなたがいることがわかりますtransition持続時間が指定されていても、追加されるプロパティの持続時間は0sです。

また、.delay()は、.animate()コールのようなキューでのみ機能します。

UPDATE

あなたはsetTimeout匿名関数の内部で.toggleClass()電話をかける場合、必要に応じて動作するように表示されます。ここでは

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

はデモです：http://jsfiddle.net/38FrD/2/