ERROR

display: none에 트랜지션이 안걸리는 현상.

처음엔 내가 트랜지션 줄 대상을 잘못 잡은줄 알고 삽질을 거하게 한 다음 검색해봤는데,

그냥 display: none의 경우는 아예 렌더를 안하기에 그냥 트랜지션 걸릴 시간도 없이 뚝딱 사라져 버리는 것.

생각해보면 당연한건데 이걸로 삽질을 이렇게 많이 했다니..

Solution

이거 깨닫고 나서는 간단했다.
바로 visivility 속성과 opacity 속성을 사용하는 방식인데,

이전이

div > span {
  display: none;
}

div:hover > span {
  display: inline; 
}

이런식으로 생각했다면,

div > span {
  visivility: hidden;
  opacity: 0;
}

div:hover > span {
  visivility: visible;
  opacity: 1;
}

이런 식으로 생각을 조금만 바꿨다.

이게 내가 생각하던 트랜지션이 서서히 사라지고 서서히 생기는 방식이어서 opacity 를 사용했지만, height 같은 것도 충분히 사용할 수 있다.