CSS 전환은

Question

이의 내가 정의 left 스타일 속성을 일부 블록을 가지고 그 속성에 대한 transition으로 한 가정 해 봅시다 DOM 조작 작동하지 않습니다 완벽하게 전환 가지고 모든 것을했습니다 :

$('#caret').css('left', '100px'); 

을하지만 DOM에 한 장소에서 다른 장소로 블록을 이동할 때 다음, 아무것도 전이를 left을 변경, 그냥 즉시 제공하기 위해 점프 n 값 :

$('#caret').appendTo('#container').css('left', '50px'); 

Hovever 난 잠시 후 다시 left 바뀌면, 다시 전환된다. 그것은 준비하는 데 시간이 필요하다고 느낍니다.

그래서, 그 이유는 http://jsfiddle.net/L624m/2/ 일어나고 :

나는이 문제를 설명하는 간단한 쇼케이스를 만들었습니다?

Answer 1

일반적인 브라우저에서는 JavaScript 코드가 DOM에서 새 요소를 먼저 만들지 않으므로 실제로 스타일이 새 요소에 직접 적용되어 전혀 전환이 발생하지 않습니다.

요소를 추가 한 후 JavaScript를 "인터럽트"하고 DOM에 새 요소를 먼저 알려야합니다. setTimeout의 브라우저는 항상 DOM의 변화가 정말 대신 만들어 후 left 스타일 의 변화를 대기 때문에,

setTimeout(function(){ 
    caret.css('left', left === '20px' ? '100px' : '20px'); 
},0); 

그래서 : 일반적으로이처럼 setTimeout 에선 0ms와 간격을 사용하여 수행됩니다 자신들도 대기 중이다.