Jquery를 사용하여 클래스 추가로 CSS3 전환 발생

Question

현재 클래스를 추가 할 때 CSS3 불투명 전환을 실행하려고하는 실행중인 피들이 있습니다. 기본 설정은 버튼을 클릭 한 다음 jquery를 통해 dom에 div를 추가 한 후 dom에 해당 요소를 추가 한 다음 클래스에 추가합니다. 이 새로운 DOM 요소에 클래스를 추가하는 것은 전환을 시작한다고 가정하고 있지만, 실제로 발생하는 것은 요소가 표시되지만 불투명도 전환이 작동하지 않는다는 것입니다. 어떤 도움을 많이 주시면 감사하겠습니다, 나는 바이올린에 대한 링크를 남겨두고 있습니다 여기 fiddle link예요. 나는 jquery로 페이드 인을 할 수 있다는 것을 알고 있습니다. 그러나 이것은 단지 다른 css를 시작하는 데 사용되는 실험 일뿐입니다. 기타 불투명도 전환

Answer 1

CSS3 전환이 동적으로 생성 된 요소에서 아직 지원되지 않는다고 생각합니다. div을 HTML에 직접 배치하여 샘플을 수정하려고 시도했지만 전환이 정상적으로 처리되었습니다. 브라우저 지원이 향상 될 때까지 해결 방법으로 그걸로 살아야 할 수도 있습니다.

Answer 2

이 문제가 발생하기 전에 발견 한 유일한 해결책은 setTimeout을 추가하여 DOM에 새로운 요소가 있음을 알리는 것입니다. 그것은 제로 MS 될 수 있으며, 그것은 여전히 ​​작동합니다 : 클래스가 미리 정의 된 경우, 그것은 참으로 만 보인다

$('button').live('click', function() { 
    $(this).after("<div class='fade'>This is just a test</div>") 
    setTimeout(function(){$(".fade").addClass("in");}, 0) 
}); 

http://jsfiddle.net/tfmFx/