JavaScript로 클래스를 추가, 제거하는 것으로 fade in, fade out을 부여했다.
클래습 변경으로 인해 display:none;이 되었을 때, transition 속성을 통해 부드럽게 전환이 될 것이라고 생각했는데....적용이 안된다!
왜 적용이 안되는 것인지 이유를 알아보자!

원인

display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead.
- sitepoint 게시글 -

이유를 찾아본 결과, 위와 같은 글을 찾을 수 있었다.

block은 존재하거나 존재하지 않거나, 반드시 둘 중 하나만 가능하기 때문에, 부분적으로 display가 될 수 없다.

여기서 잠시 transition의 발동 조건에 대해 살펴보면, 아래와 같은 경우에 발동하게 된다.

상태 1 -> 상태 2

그런데, display:none;에서 display:block;으로 변경이 된다면, 아래와 같은 경우이므로

존재하지 않는 상태 -> 상태 2

transition 속성이 적동하지 않은 것이다!

어떻게 하면 구현할 수 있을까?

그렇다면 display:none;, display:block;에 대한 효과는 적용할 수 없는 것인가?
아니다. 꼼수가 있다.

opacity

필자는 opacity 속성을 이용해서 fade in, out 효과를 적용했다.
opacity는 불투명도를 조절해서 눈에 보이는 정도를 바꾸는 것이기 때문에,
transition의 발동 조건에 부합한다!

.show {
  opacity: 1;
  transition: all 1s;
}

.hide {
  opacity: 0;
  transition: all 1s;
}

보통은 하나의 클래스로 toggle()을 많이 사용하시지만,
필자는 팀원분들과 add(), remove()로 클래스를 변경하는 것으로 정했기 때문에
각각의 클래스를 정해서 fade in, out을 구현했다.

참고 자료

choonse님 블로그
dev-tinkerbell님 블로그
sitepoint 게시글