0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까?

Question

내가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다.

이 코드펜(잘못된 코드를 양해해 주세요. 그냥 장난을 치고 있는 것뿐입니다)에서 잠자기를 주석 처리하면 부드러운 전환이 더 이상 작동하지 않습니다. div의 위치가 갑자기 변경됩니다. 수면 시간이 0ms이기 때문에 이상합니다.

으아악

이건 제가 이해하지 못하는 이벤트 루프 마술인 것 같습니다. 누군가 나에게 이것을 설명해 줄 수 있습니까?

Answer 1

이 문제에 대해 일반적인 JavaScript 솔루션을 사용하고 있지만 React는 가상 DOM을 사용하고 상태가 변경되면 DOM 요소가 다시 렌더링될 것으로 예상합니다. 따라서 React 상태를 활용하여 가상 DOM에 있는 요소의 XY 위치를 업데이트하는 것이 좋지만 여전히 CSS를 사용하는 것이 좋습니다.

작업 데모 여기또는 코드는 여기에서 찾을 수 있습니다:

---

으아악

Answer 2

sleep 期间，浏览器可能有时间重新计算 CSSOM 框（也称为“执行回流”）。没有它，您的 transform에서는 규칙이 실제로 적용되지 않습니다.
실제로 브라우저는 변경 사항을 적용하고 전체 페이지 상자 모델을 업데이트하는 데 실제로 필요할 때까지 기다립니다. 그렇게 하면 비용이 많이 들 수 있기 때문입니다.
이런 일을 할 때

으아악

모든 CSSOM에는 최신 상태 “绿色”가 표시됩니다. 나머지 두 개는 폐기되었습니다.

따라서 이벤트 루프가 실제로 반복되도록 하지 않으면 코드에서 transStr 값도 볼 수 없습니다.

그러나 0ms에 의존하는 것은 setTimeout 문제가 있으며, 그 때 스타일이 다시 계산되도록 보장할 수 있는 것은 없습니다. 대신 수동으로 재계산을 강제하는 것이 더 좋습니다. 일부 DOM 메서드/속성은 이 작업을 동기적으로 수행합니다. 하지만 리플로우는 매우 비용이 많이 드는 작업일 수 있으므로 꼭 가끔 사용하도록 하고, 코드에 이 작업이 필요한 곳이 여러 군데 있는 경우 단일 리플로우가 수행될 수 있도록 모두 연결해야 합니다. p>

으아악 으아악 으아악