Intro
버튼을 클릭 시 display: none;을 통해 요소가 사라졌다가 버튼을 재 클릭시 display:block이 되며 transition효과와 함께 요소가 나타나는 코드를 구현해보았다.
그런데 display:none을 통해 다시 화면에 요소가 나타나면 transition효과가 제대로 나타나지 않은 것을 확인할 수 있었다.
이 발생 문제를 이해하기 위해서는 먼저 웹페이지가 렌더링되는 프로세스를 이해할 필요가 있었다.
CSS와 HTML의 웹 페이지의 렌더링 프로세스
서버는 브라우저에 의해 해석된 HTML과 CSS를 파싱하고 각각 DOM트리과 CSSOM트리를 구축한다. 브라우저는 DOM과 CSSOM가 정의되면 렌더 트를 생성한다. 여기서 렌더트리란 브라우저에 의해 내부적으로 정의되고 시각적 요소를 나타내는데 사용되는 또 다른 트리이다.
이 때 렌더트리는 <head>내부의 요소와 display:none으로 정의된 요소는 생략한다.
이렇게 렌더트리의 생성이 완료되면 브라우저는 화면에 요소를 배치하는 데 사용하는 프로세스(리플로우)를 실행한다.
transition과 display: none
transition은 두 상태에서 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 속성이다.
하지만 display: none 상태에서 동적으로 클래스를 추가하여 display: block을 추가한다고 하면 렌더 트리에 없다가 추가되는 것이기 때문에 transition의 처음 시작점이 없어 시각적으로transition이 동작되지 않는 것처럼 보이는 것이다.
따라서 문제를 해결하기 위해서는 렌더링트리에는 해당 요소가 있되, 시각적으로만 숨겨질 수 있도록 height: 0 또는 opacity:0코드를 넣어 작성하면 된다.
--
참고자료
브라우저는 어떻게 동작하는가?
웹 페이지의 렌더링 프로세스
display none이 transition이 안먹히는 이유
