[CSS] display: none의 animation 및 transition
서론
CSS 작업을 하던 중, 어떤 요소를 보이지 않는 상태에서 보이는 상태로 전환하기 위한 animation을 만드는 과정에서 display: none;이 display: block;으로 전환되지 않는 점을 발견했다. 그리하여 그 이유가 무엇일지에 대해 알아보았다.
display란?
CSS 속성 중 display는 어떠한 요소에 대한 레이아웃을 결정한다. 외부적으로는 이 요소가 어디에, 어떻게, 얼마 만큼의 공간을 차지하며 배치될 지를 결정하고, 내부적으로는 자식 요소들의 레이아웃 또한 결정한다. 대표적인 display 속성에는 block, inline, grid, flex, none 등이 있다.
무엇이 원인일까?
우선 원인을 파악하기 위해 animation과 tranistion의 작동 방식을 알아본 결과, 이 둘은 요소의 어떤 속성에 대해 애니메이션이 실행되기 전과 실행된 후의 상태를 비교하고 그것을 자연스럽게 연결해주는 방식으로 작동한다고 한다. 다시 말해 ‘계산 가능한 실행되기 이전 상태’가 존재해야 한다는 뜻이다. 그렇다면 이러한 상태는 어디에서 확인할 수 있으며 어떻게 이해하면 되는걸까? 그 답은 Critical Rendering Path(주요 렌더링 경로)에 있었다.
Critical Rendering Path(주요 렌더링 경로)
우리가 입력하는 HTML, CSS, 그리고 자바스크립트는 브라우저 화면에 그려지기 위해 내부적으로 픽셀로 변화하는 일련의 단계에 걸쳐 렌더링이 이루어지는데 이것을 주요 렌더링 경로라고 부른다. 이 과정을 최적화함으로써 페이지의 로딩 속도를 높이고 성능을 개선할 수 있다는 점은 매우 중요하지만 이 글에선 다루지 않도록 하고, 간단하게 주요 렌더링 경로의 5가지 실행 단계를 들여다 보도록 하겠다.
- HTML로부터 Document Object Model(DOM, 문서객체모델)이 생성된다.
- CSS로부터 CSS Object Model(CSSOM, CSS객체모델)이 생성된다.
- DOM과 CSSOM을 결합하여 Render-Tree를 형성한다.
- 렌더 트리로부터 각 요소가 뷰포트의 공간을 어디에서, 얼마나, 어떻게 차지할지 결정되어 Layout을 결정한다.
- 렌더 트리와 레이아웃의 정보를 토대로 화면에 픽셀을 그리는 Paint가 이루어진다.
이 과정에서 display:none의 속성을 가진 요소의 경우 렌더 트리를 형성할 때 누락되게 되어 레이아웃이 존재하지 않게 된다. 다시 말해 화면에 표현될 당시 그 요소는 화면에 존재하지 않는 상태로 인식된다는 뜻이다. 그렇기 때문에 이 요소는 이전 상태라는 것이 존재하지 않는 것이고, 이전 상태를 요구로 하는 애니메이션의 작동이 불가능한 상태라는 것이다.