jquery를 사용하는 CSS 전환이 예상대로 작동하지 않습니다.

Question

div가 있고 font-size 20px에서 font-size 40px로 전환하고 색상을 변경하고 싶습니다. 나는 다른 대안으로 이걸 만들 수 있다는 것을 알고 있지만 "전환"의 사용법을 탐구하고 싶습니다. 뭔가 잘못되었다고 생각합니다.

내가 할 경우이 : JQuery와 먼저 "전환"을 설정하고, 그 후 색상과 글꼴 크기를 설정하고 브라우저가 전환을해야한다

$("#xxx").css({transition:"all 1500ms ease-out 0ms",color:"#00FFFF", fontSize:"40px"}); 

. 그러나 글꼴 크기와 색상이 즉시 적용됩니다.

이상한 점은 처음으로 전환을 설정하고 2 초 후에 글꼴 크기와 색상을 설정하면 전환이 원활하게 이루어집니다. 왜?

아래 예를 확인하십시오. 링크를 열면 브라우저가 전환을 부드럽게하는 대신 색상 및 글꼴 크기를 즉시 적용합니다. 왜?

https://jsfiddle.net/hw33bghm/

Answer 1

이 예상 한 방식으로 작동하지 않는 이유는 DOM에 어떻게 리플 로우 작품 때문이다. 리플 로우는 DOM에서 요소의 위치와 기하학을 다시 계산하기위한 웹 브라우저 프로세스이며 요소의 CSS 속성을 조정하는 등 많은 경우에 의해 트리거 될 수 있습니다.

여러 CSS 속성을 사용하여 $("#xxx").css({...}); 호출을하면 브라우저에 일괄 배치 작업을 수행하게하고 사용자 차단 방식으로 모든 작업을 수행합니다. 작업이 완료되고 새 DOM이 렌더링 될 때까지 transition 속성이 없으므로 스타일이 즉시 적용됩니다.

는 또한, 모든 최신 브라우저는 리플 로우 최소화하기 위해 최적화가 당신은 단순히 당신의 속성을 설정 분리, 그래서 만약 (다시, 그것은 블록 조작이의 등을 성능에 영향을 미칠 수 등) :

$("#xxx").css({transition:"all 1500ms ease-out 0ms"}); 

$("#xxx").css({color:"#00FFFF", fontSize:"40px"}); 

당신은 그것을 예상을 transition 속성을 설정하고 리플 로우 한 다음 color 및 fontSize을 설정하면 전환이 시작되고 의도 한대로 작동합니다. 그렇다고해서 이러한 작업이 브라우저에 의해 배치되고 모든 리플 로우가 다시 일어날 것입니다. 당신이 color 및 fontSize을 설정하기 전에 잠깐만 때 이 작업을 수행하는 이유

이

도있다. 이러한 레이아웃 작업은 더 이상 함께 배치되지 않으므로 다른 두 CSS의 CSS를 설정하면 이번에는 transition 속성이 있습니다. 좀 더 자세한 내용은

체크 아웃 : 정확하게 진행되고 있는지 그 https://developers.google.com/speed/articles/reflow#guidelines