숨겨진 요소에 애니메이션 주기

보였다가 안보였다가

자바스크립트로 프론트엔드를 공부하다보면 이벤트를 통해 특정 요소를 보여줬다가 안보여줬다가 하는 경우가 많다. 오늘은 그런 경우에 대한 자세한 얘기를 해보고 싶다.

여러가지 방법들

• 첫번째 방법은 display이다. display 속성을 none으로 할당하면 요소가 보이지 않는다.
• 두번쨰 방법은 visibility이다. visibility 속성을 hideen으로 할당하면 요소가 보이지 않는다.
• 세번째 방법은 opacity이다. 불투명도를 조절하는 opacity를 0으로 두면 요소가 보이지 않는다.

차이

위 3가지 방법들의 차이는 다음과 같다. 먼저, display를 none으로 두면 해당 요소는 보이지 않는 것뿐아니라 공간도 차지하지 않는다. 이와 달리 visibility와 opacity는 보이지만 않을 뿐 원래 차지하던 공간을 유지한다.
visibility를 hidden으로 두어도 자식 요소는 영향을 받지 않는다. 이와 달리 display와 opacity는 자식 요소도 같이 영향을 받는다.
opacity를 0으로 두어도 해당 버튼을 클릭하면 이벤트를 발생시킬 수 있다. 이와 달리 visibility를 hidden으로 display를 none으로 하면 이벤트를 발생시킬 수 없다.

display: none;

display:none이 아예 공간을 차지하지 않은 이유는 렌더링 트리 때문이다. 렌더링 트리를 생성할 때 CSS에 의하여서 display:none 속성이 주어진 노드들은 누락된다. 요소가 완전히 제거되었으므로, 공간도 아예 차지하지 않는 것이다.
렌더링 트리 생성, 레이아웃 및 페인트

transtion을 이용한 애니메이션

CSS의 transtion 속성을 사용하면 어떤 프로퍼티 상태의 변화의 속도를 조절할 수 있다. 아느 시간만큼 변화할껀지, 어떤 속성을 변화시킬건지, 어떻게 transtion을 실행할건지를 정할 수 있다. 그렇기 때문에 transition 속성을 이용하면 애니메이션과 같은 효과를 만들 수 있다.

하지만, display 속성의 값을 none에서 block으로 바꿀 때는 transition을 이용할 수 없다. 왜 그런걸까?

아래 내용은 display none이 transition이 안먹히는 이유
을 참고하였습니다.

앞서 알아본 내용에 따라서 우리가 애초에 특정 요소를 display:none으로 설정하면 렌더링 트리에서 생략된다. 이후 우리가 동적으로 display:block으로 변화시키면 이 때 새롭게 렌더링 트리에 추가되므로, transition을 적용할 시작점이 없다. 그래서 transtion이 먹히지 않는다.

해결법

하지만, 프로그래밍을 하다보면, 꼭 display:none과 transition을 함께 쓰고 싶은 상황이 생긴다. 예를 들어서 버튼에 따라서 해당하는 아이템만 보여주고 싶은데, visibility나 opacity를 쓰면 해당하지 않는 아이템들도 공간을 차지하여서 자연스럽게 보이지 않을 것이다. 여기에다가 애니메이션을 추가하고 싶다면 어떻게 해야하는가?

아래 내용은 Dream Coding의 포트폴리오 웹사이트 클론코딩 강좌에서 배운 내용을 기반으로 작성하였습니다.

결론은 opacity와 display를 함께 사용하는 것이다. 두가지 방법의 장점을 사용하고 싶으면 둘 다 쓰는 방법밖에는 없다.

1.opacity:0 & transition을 이용하여 버튼을 누른 순간 사라지는 애니메이션을 넣는다.

2. setTimeout을 이용하여서 인위적으로 약간의 시간 텀을 준다.

   약간의 시간텀 이후...

• 버튼에 따라서 해당하지 않은 요소는 display: none를 추가한다.

• pacity:0을 해제시키면 요소가 생성되는 애니메이션이 생긴다.