CSS 스타일이 아직 완전히 적용되지 않은 상태에서 전환이 너무 일찍 시작됩니다.

Question

내 코드는 here입니다. 세 위치 : zero(0,0), end(200,200), random(0,200).

div는 처음에 random(0,200) 위치에 있습니다.

1 단계) 위치 zero(0,0)에 사업부를 설정합니다

난에 원하는. 이 단계는 애니메이션이 아닙니다

단계 2) 위치를 zero에서 end으로 옮깁니다. CSS 스타일 (className = 'pos_zero'가) 완전히 아직 적용되지 않은 상태,

document.getElementById('x').className = 'pos_zero'; // set the div to the position zero(0,0) 
move(); 
// in function move: 
// document.getElementById('x').className = ' trans'; 
// document.getElementById('x').className += ' pos_end' ; 

그 전환이 너무 일찍 시작하는 것 같다 :이 단계는 애니메이션을 아주 잘 does't 작업 같은

코드가 있습니다. 단지 random 위치에서 end 위치로 직접 이동합니다. 그리고 실제로 원하는 것은 random이 아닌 zero 위치의 end 위치에 애니메이션을 배치하는 것입니다. 이 같은

코드가 작동합니다

document.getElementById('x').className = 'pos_zero'; // set the div to the position zero(0,0)  
setTimeout('move()',1); 

이 코드는 timeout 기능을 사용하여 성공적으로 수행. 이 코드는 div 위치를 pos_zero으로 설정 한 다음 timeout 함수로 비동기 적으로 전환합니다. 그리고 timeout 기능은별로 전문적이지 않습니다.

그래서 저는보다 전문적인 솔루션을 찾고 있습니다.

그건 그렇고. 나는 궁금해. 스타일이 완전히 적용되도록하는 방법이 있다면 "Style.flush()"또는 무엇인가?

@Inerdial 작동합니다! 많은 감사합니다. 업데이트를 강제 실행하려면 (즉각적인 동기 리플 로우 또는 재 레이아웃을 강제 실행) 자바 스크립트는 변경 사항에 영향을받는 속성을 읽어야합니다. someSpan 및 otherSpan의 위치`새로운 코드는 Timeout없이 작동합니다.

document.getElementById('x').className = 'pos_zero'; 
var tmp = document.getElementById('x').offsetTop; // read a property to force an update. 
move(); 

모두들 감사합니다. 그리고 나 혼란스럽게 만들어서 미안해.

Answer 1

@Inerdial에게 감사드립니다. 그것은 작동하지!. 사실이 답변은 그의 의견에서 비롯된 것입니다.

업데이트를 강제 실행하려면 (즉각적인 동기식 리플 로우 또는 릴레이 아웃을 강제 실행) 자바 스크립트는 변경 사항에 영향을받는 속성을 읽어야합니다. someSpan 및 otherSpan의 위치`- stackoverflow.com/a/1397505/41655

새로운 코드는 제한 시간 (jsfiddle.net/vd6V8)없이 작동 :

document.getElementById('x').className = 'pos_zero'; 
var tmp = document.getElementById('x').offsetTop; // read a property to force an update. 
move(); 

모든 너희들을 감사드립니다. 그리고 나 혼란스럽게 만들어서 미안해.

Answer 2

실제로 CSS를 변경하는 동안 브라우저가 현재 실행중인 코드에서 "해제"해야하기 때문에 이것은 실제로 유일한 방법입니다.

코드를 사용하면 CSS가 적용되고 다른 코드가 실행됩니다. 이렇게하면 예상되는 동작이 발생합니다.