🎒display none에서 block 으로 바뀔때 무슨일이 벌어질까?
요소가 화면에 출력되기 위해 무슨 과정을 거치는지부터 생각을 해보자.
일단 HTML과 CSS를 파싱후에 각각 DOM, CSSOM이 생성될 것이다.
DOM과 CSSOM을 결합하여 렌더링 트리를 형성한다.
이 렌더링 트리는 화면에 출력될 요소들의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다.
이때, 렌더링 트리는 화면에 출력되지 않아도 될 일부 노드(meta, script 등)와 CSS를 통해 숨겨지는 노드가 렌더링 트리에서 생략된다.
transition은 두 상태에서 속성의 변화가 일정 기간에 걸쳐 일어나도록 하지만 display: none 상태에서 동적으로 클래스를 추가하여 display: block을 추가한다고 하면 렌더 트리에 없다가 추가되는 것이기 때문에 transition의 처음 시작점이 없다. 그래서 시각적으로transition이 동작되지 않는 것처럼 보이는 것이다.
🎪 컨텐츠만 시각적으로 숨기지만 접근성 트리에는 있어야 하는 경우
height : 0
transform : scaleY(0)
opacity : 0
🎁컨텐츠도 시각적으로 숨기고 접근성 트리에도 없어야 하는 경우
visibility : hiddn
그리고 대부분의 경우, 요소를 시각적으로 숨긴다는 것은 컨텐츠를 숨긴다는 것을 의미하는데 이는 물론 스크린리더 또한 읽히면 안된다는 것을 의미한다고 생각한다. 이렇게 구현하기 위해서는 visibility 속성을 이용하면 된다.
또는 동적으로 클래스를 붙이기 전 setTimeout을 사용하여 렌더링트리가 생성 된 후 transition을 구현할 수도 있지만 리렌더링의 문제로 visibility속성을 추천한다.
