display: none
에 트랜지션이 안걸리는 현상.
처음엔 내가 트랜지션 줄 대상을 잘못 잡은줄 알고 삽질을 거하게 한 다음 검색해봤는데,
그냥 display: none
의 경우는 아예 렌더를 안하기에 그냥 트랜지션 걸릴 시간도 없이 뚝딱 사라져 버리는 것.
생각해보면 당연한건데 이걸로 삽질을 이렇게 많이 했다니..
이거 깨닫고 나서는 간단했다.
바로 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
같은 것도 충분히 사용할 수 있다.