[CSS] display:none에는 transition 적용X -> visibility로!

display:block -> display:none으로 변경할 때는 스르륵 변하는 transition 속성이 먹지 않는다. 따라서 visibility를 건드려주는 것이 편하다.

특정 컴포넌트가 어떤 변수 값이 true일때만 나타나도록 하는 코드는 다음과 같다.

interface Idiv {
  dragging: boolean;
  isDraggingOver: boolean;
}
const fadeIn = keyframes`
  from {
    transform: scale(.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
`;

const fadeOut = keyframes`
  from {
    transform: scale(1);
    opacity: 1;
  }
  
  to {
    transform: scale(.95);
    opacity: 0;
  }
`;

const IconWrapper = styled.div<Idiv>`
 // ...
  transition: visibility 0.2s;
  background-color: ${(props) =>
    props.isDraggingOver ? "#e67a68" : "#ea9688"};
  visibility: ${(props) => (props.dragging ? "visible" : "hidden")};
  animation: ${(props) => (props.dragging ? fadeIn : fadeOut)} 0.2s;
`;

html 상에는 표시가 되지만 현재 프로젝트 코드 구조상 크게 문제가 없는 부분이어 위와 같이 구현했다.