[CSS] transition과 display의 관계

CSS의 transition 속성은 요소의 상태 변화에 부드러운 애니메이션 효과를 적용하는 데 사용된다.
개발을 하다가 transition속성을 제대로 주었음에도 불구하고 적용이 되지 않는 현상이 있었다.

구글링해 본 결과 transition은 해당 영역에 display:none -> display:block 속성을 적용하면 제대로 동작하지 않는다는것을 알게되었다.

이는 display 속성이 애니메이션 효과를 위한 중간 값을 가지지 않기 때문인데, 왜 transition이 display 속성에 적용되지 않는지, 그리고 이를 해결할 수 있는 방법을 알아보자.

📌 display 속성이란?

display 속성은 요소가 문서 상에서 어떻게 표시되는지를 결정한다.
주요 값으로는 block, inline, none 등이 있다.

📌 transition과 display의 관계

transition 속성은 연속적인 중간 상태를 통해 값의 변화를 애니메이션 처리한다.
그러나 display 속성은 불연속적인 상태만 가지며, 중간 상태가 존재하지 않는다.

예를 들어, display: block에서 display: none으로의 변화는 즉각적이며 중간 단계가 없기 때문에 transition이 동작하지 않는것처럼 보인다.

💡 그렇다면, 해결방법은?

1. opacity 와 visibility

<style>
  <!-- opacity -->
  .content {
    opacity: 1;
  }

  .content.move {
    opacity: 0;
  }

  <!-- visibility -->
  .content2 {
    visibility: hidden;
  }

  .content2.move {
    visibility: visible;
  }
</style>

opacity 또는 visibility 속성을 사용하여 요소의 보임 상태를 전환한다.
opacity의 속성을 1 -> 0 으로 변경해주어 요소를 보여준다.
혹은 visibility의 속성을 hidden -> visible로 변경해준다.

2. height

<style>
  .content {
    height: 0vh;
  }

  .content.move {
    60vh;
  }
</style>

높이를 0으로 설정하여 숨기고, 원래 높이로 전환하여 애니메이션 효과를 제공한다.