jQuery를 사용하여 CSS3 애니메이션을 수행합니다 .appendTo

Question

.appendTo()을 사용하여 요소의 DOM 위치를 수정하고 싶습니다. 이 작업이 완료되면 CSS3를 사용하여 요소를 애니메이션화해야합니다.

요소는 움직이지 않으며 대신 새로운 CSS 스타일로 스냅됩니다.

자바 스크립트 :

$(".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/

내가 무슨 일이 일어나고 있는지 정말 모르겠어요하지만 당신은 방화범 이미지 요소를 볼 경우에 당신이 볼 수있는 transition 지속 기간이 지정되어 있어도 추가되는 속성의 지속 시간은 0s입니다.

.delay()은 대기열 (예 : .animate() 통화)에서만 작동합니다.

UPDATE 당신이 setTimeout 익명 함수 내부의 .toggleClass() 전화를 걸 경우가 원하는대로 작동하도록 나타납니다

: http://jsfiddle.net/38FrD/2/