페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 만들기

import React from 'react';
import { Link } from 'gatsby';

export default () => <>
  <p>A 페이지 입니다.</p>
  <Link to='/page-b'>B 페이지 가기</Link>
</>;

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-layout',
      options: {
        component: require.resolve('./src/components/Layout.js'),
      },
    },
  ],
};

import React from 'react';

// `page-a.js`, `page-b.js`에서 반환한 내용이
// <Layout> 컴포넌트에 `children` prop으로 들어옵니다.

// 이 레이아웃 컴포넌트는 페이지가 전환돼도 마운트된 상태가 유지됩니다.
export default ({ children }) => <>
  <div className='page'>
    {children}
  </div>
</>;

import React from 'react';
import { Transition, TransitionGroup } from 'react-transition-group';

import './Layout.css';

// `location` prop으로는 현재 브라우저의 주소 상태를 알 수 있는 객체가 들어옵니다.
// gatsby-plugin-layout 플러그인이 주입해준 값입니다.
export default ({ children, location }) => <>
  <TransitionGroup
    // `component` prop에 `null`을 넘겨주지 않으면 `<div>`로 한단계 감싸집니다.
    component={null}>
    <Transition
      // 현재 pathname을 key prop으로 넘겨주어
      // 페이지가 전환될 때 이전 페이지가 TransitionGroup에서 빠지고
      // 새 페이지가 들어온 것으로 간주되도록 합니다.
      key={location.pathname}
      // timeout prop으로 넘겨준 시간(ms 단위)에 따라 `status`가 변화합니다.
      timeout={{ enter: 300, exit: 300 }}>
      { status => (
        // 전환 상태(`status` 인자)는
        // `unmounted`, `exited`, `entering`, `entered`, `exiting`
        // 이렇게 들어오는데, Transition 엘리먼트가 아예 자식 목록에서 빠져버리면
        // `unmounted` 상태가 들어올 일이 없습니다.
        // 따라서 뒤쪽의 네가지 상태만 들어온다고 생각하면 됩니다.
        <div className={`page ${status}`}>
          {children}
        </div>
      ) }
    </Transition>
  </TransitionGroup>
</>;

.page {
  top: 0;
  transition: opacity 0.3s;
}
.page.entering,
.page.entered {
  position: relative;
  opacity: 1;
}
.page.exiting,
.page.exited {
  position: absolute;
  opacity: 0;
}