[CSS] visibility에 transition이 적용 안되는 이슈

CSS transition with visibility not working ..

transition으로 서서히 나타나는 효과를 주고 싶은 컴포넌트가 있었는데 delay 외엔 적용이 안됐다.
검색해보니 transition이 모든 속성에 적용되는 것은 아니었다.

나는 visibility를 통해 컴포넌트를 숨기고/나타내고 있었는데, visiblity 같이 수치로 나타낼 수 없는 속성은 transition이 적용되지 않는다.

// ❌
visibility: ${(props) => (props.isCreated ? 'visible' : 'hidden')};
transition: visibility 4s ease-in-out 1s;

따라서 opacity를 사용해 서서히 나타나는 효과를 완성했다.

// ⭕️
opacity: ${(props) => (props.isCreated ? 1 : 0)};
transition: opacity 1s ease-in-out;

참고한 스택오버플로우
https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working

animation 또는 transition 적용 가능한 속성들
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animated_properties

실제 적용 애니메이션 영상 볼 수 있는 PR
https://github.com/Neogasogaeseo/Naega-Web