css3 - 전환 변환의 초기 표시:블록에 이동 효과가 없는 이유는 무엇입니까?

Question

https://jsfiddle.net/zjmove/2...

---xiaoboost의 답변을 읽은 후---
결국 이것이 가장 적절한 변경입니다: https://jsfiddle.net/25d3ga9j...
사실 명확하게 하지 않았습니다. 다음 애니메이션은 필요하지 않습니다. 오른쪽에서 왼쪽으로의 애니메이션만 필요합니다. 초기 표시: 블록에 애니메이션 효과가 없는 이유는 초기 항목이 이미 표시되었고 강제 리플로우가 표시를 다시 그릴 시간이 없었기 때문일 수 있습니다. 없음은 페이지를 다시 그릴 필요가 없습니다. 왼쪽에서 오른쪽에서 왼쪽으로 이동합니다. 다시 한 번 감사드립니다.

--
문제는 이 강제 리플로우와 관련이 있다고 밖에 말할 수 없지만 원리는 아직 불분명합니다.

--브라우저마다 큰 차이가 있습니다
위 수정 사항은 Firefox에서는 완벽하게 작동하지만 Chrome57(우분투)에서는 마우스가 움직일 때 한 번 깜박입니다

--초기 디스플레이:block, 변환 속성을 인쇄하고 강제 리플로우가 적용되지 않음을 확인합니다. 요약하자면 전환이 있을 때 display:block이 적용되지 않습니다.
https://jsfiddle.net/25d3ga9j...

Answer 1

우선, 저는 개인적으로 웹페이지 렌더링 프로세스와 js 프로세스가 상호 배타적이기 때문이라고 생각합니다.

자세한 내용은 다음 질문을 참조하세요. js를 사용하여 요소에 className을 추가하면 브라우저는 어떻게 되나요?
가장 많은 투표를 받은 답변이 이를 매우 명확하게 했다고 생각합니다. js 스크립트에 다음 문장을 추가했습니다. js脚本中加入的这么一句：

$('.item')[0].offsetWidth;

我猜也是想要强制重绘页面吧？

我个人并没有研究过这方面浏览器具体的实现，但是根据我个人的观察，读取DOM的信息虽然会强制重绘网页，但实际上也只是内部数据的重新计算，DOM的改变并不会反映到页面中，真正的页面重绘还是只能等到当前js进程完成之后。

具体到你这个例子中，为了以示区别，我把.next和.left在css中的宽度稍微改了改，然后js中打印出添加上.next 으아악

페이지를 강제로 다시 그리도록 하려는 것 같나요?

저는 개인적으로 이와 관련하여 브라우저의 구체적인 구현을 연구한 적이 없지만 개인적인 관찰에 따르면 DOM 정보를 읽으면 웹 페이지가 강제로 다시 그려지지만 실제로는 내부 데이터를 다시 계산하고 DOM이 변경되는 것입니다. 하지 마십시오. 페이지에 반영되며 실제 페이지 다시 그리기는 현재 js 프로세스가 완료될 때까지만 기다릴 수 있습니다.

구체적으로 귀하의 예에서는 차이점을 보여주기 위해 CSS에서 .next 및 .left의 너비를 약간 변경한 다음 js로 인쇄하고 추가했습니다. 상위 .next 클래스 뒤의 너비:

으아악 으아악 🎜여기서 인쇄된 너비가 절반에 불과한 것을 볼 수 있습니다. 이는 메모리의 DOM 데이터가 실제로 다시 계산되었지만 페이지가 다시 그려지지 않았음을 나타냅니다. 🎜저기 질문의 해결 방법과 유사하게 페이지 효과 전환 사이의 간격에서 페이지 렌더링 프로세스를 확보하기 위해 비동기 기능만 사용하면 동적 효과를 볼 수 있습니다. 🎜 🎜예를 들어 여기에서는 다음과 같이 변경할 수 있습니다.🎜 으아악