React Router 이동 시 Transition Animation 주기

React Transition Group이 공식 라이브러리라고 하여 사용해보았다.

npm install react-transition-group --save

 

 

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Header />
      <GlobalStyle />
      <AppLayout>
        <Component {...pageProps} />
      </AppLayout>
      <Footer />
    </>
  );
}

export default MyApp;

Component 부분을 AppLayout 태그로 감싸준다.

 

 

AppLayout.tsx

import React, { ReactNode } from "react";
import { Transition, TransitionGroup } from "react-transition-group";
import { useRouter } from "next/router";

interface Props {
  children: ReactNode;
}

const TIMEOUT = 200;
const getTransitionStyles: any = {
  entering: {
    position: "absolute",
    opacity: 0,
  },
  entered: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 1,
  },
  exiting: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 0,
  },
};

const AppLayout = ({ children }: Props) => {
  const router = useRouter();
  return (
    <TransitionGroup style={{ position: "relative" }}>
      <Transition
        key={router.pathname}
        timeout={{
          enter: TIMEOUT,
          exit: TIMEOUT,
        }}
      >
        {(status) => (
          <div
            style={{
              ...getTransitionStyles[status],
            }}
          >
            {children}
          </div>
        )}
      </Transition>
    </TransitionGroup>
  );
};

export default AppLayout;

이렇게 주면 모든 페이지 이동 시 fade-in-out 애니메이션이 보여지게 된다.

 

 

페이지별로 다른 애니메이션을 주고싶다면 각각의 페이지 컴포넌트 최상위단에 Transition을 씌워주면 된다..