[CSS] display: none이 transition으로 적용되지 않을 경우

안녕하세요. J4J입니다.

 

이번 포스팅은 display: none이 transition으로 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

발생되었던 상황

 

적용하고자 했던 css는 버튼을 클릭할 때 div 안에 포함되어 있는 모든 요소가 자연스럽게 화면에 보이지 않는 애니메이션을 적용하려고 했습니다.

 

간단하게 예시를 들어보면 다음과 같습니다.

 

See the Pen displayNoneTransition-problem by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위에서 toggle 버튼을 클릭하면 문구가 자연스럽게 사라지는 것을 확인할 수 있습니다.

 

하지만 문구가 있던 곳에 마우스를 가져다 대면 cursor: pointer을 적용했던 부분이 그대로 마우스에 표현되는 것을 볼 수 있습니다.

 

이것은 올바른 디자인이라고 볼 수 없기에 display를 이용하여 저런 요소들조차 화면에 보이지 않도록 하기 위해 다음과 같이 적용했습니다.

 

 

반응형

 

 

display 적용

 

정말 단순한 생각으로 다음과 같이 display: none을 함께 적용시켜 불필요한 요소가 특정 상황에 노출되는 것도 제거하려고 했습니다.

 

See the Pen Untitled by 김 성찬 (@ksccmp) on CodePen.

 

 

 

display를 사용했더니 위의 결과처럼 문구가 사라진 곳에 마우스를 올려놔도 커서가 보이지 않게 되었습니다.

 

하지만 발생했던 다른 문제점은 transition이 제대로 적용되지 않아 transition이 없는 것과 같은 ui를 제공해주고 있습니다.

 

해결 방법이 무엇이 있을까 생각해봤을 때 visibility를 생각할 수 있었습니다.

 

 

728x90

 

 

visibility 적용

 

다음과 같이 display대신 visiblity를 활용해봤습니다.

 

See the Pen displayNoneTransition-visibility by 김 성찬 (@ksccmp) on CodePen.

 

 

 

생각했던 모습처럼 transition이 적용되며 자연스럽게 사라지는 ui를 제공해줄 수 있었고 또한 맨 처음처럼 단순하게 opacity만 적용했던 상황에서 발생한 cursor 등이 보이는 문제점도 해결할 수 있었습니다.

 

이와 같이 자연스럽게 사라지는 ui를 제공해줄 땐 display: none 대신 visibility 활용해주시면 될 것 같습니다.

 

 

 

 

 

 

 

이상으로 display: none이 transition으로 적용되지 않을 경우 해결하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.