react-transition-group에서 슬라이드 메뉴를 만들 때의 비망록

React-transition-group은 React-transition-group으로 React에서 전단 개발을 진행하여 화면을 이동하고 싶을 때 편리하다.
이번에 이react-transition-group을 사용하여 측면에서 갑자기 나타난 메뉴를 만들었는데 넘어진 부분이 있습니다. 그 해결 방법에 대해 비망록으로 썼습니다.
하고 싶은 게 이런 느낌이야.

이 글은 styled-components를 사용하지만 Transition을 사용할 때의 해결 방법으로서 다른 스타일 형식도 바뀌지 않는다.
버전
・typescript:“3.5.3”
・react:“^16.9.0”
・react-transition-group:“^4.2.2”

어려운 곳

처음에는 다음과 같이 설치되었습니다.(행위와 무관한 부분을 생략했다.)

interface Props {
  children: ReactNode;
  open: boolean;
}

export const SlideMenu = (props: Props) => {
  return (
    <Transition
      in={props.open}
      timeout={500}
      unmountOnExit
    >
      {state => (
        <Inner state={state}>
          {props.children}
        </Inner>
      )}
    </Transition>
  );
};

const slideWidth = 500;

const Inner = styled.div<{ state: TransitionStatus }>`
  position: absolute;
  transition: 0.5s;
  right: -${slideWidth}px;
  width: ${slideWidth}px;
  transform: translateX(
    ${({ state }) => (state === "entered" ? -slideWidth : 0)}px
  );
`;

unmountOneExit에서 먼저 요소를 제거한 다음 오른쪽의 음수 위치에서 왼쪽으로 이동합니다.
다만 이 설정이라면 이렇게 움직이기 시작하면 느리고 거친 동작이 된다.

해결 방법

조금만 생각해 보면 알 수 있듯이 이 현상은 Transition의 in에서translate로 전환되는 동작이 발생하는 시간이 너무 길어서 발생한 것이다.
따라서 Transition 구성 요소의 timeout을 설정하면 다음과 같이 해결할 수 있습니다.

// before
timeout={500}
// after
timeout={{ appear: 0, exit: 500 }}

어셈블리가 마운트에서 변환 동작으로 이동하는 시간을 0으로 설정했습니다.
이것은 구성 요소가 마운트된 후 바로 설정된 애니메이션을 시작하는 것을 의미합니다.

총결산

소박하지만 잊기 쉬운 설정 내용을 메모로 남겼다.
더 똑똑한 방법이 있을지도 모르지만, 같은 곳에서 어려움을 겪는 사람들을 도울 수 있다면 좋겠다.
열람해 주셔서 감사합니다.