react-transition-groupを_app.jsxの中で使います。_appファイルで定義したコンポーネントはクライアント側で唯一マウントし続けるコンポーネントで、このコンポーネントが受け取るプロパティのComponentに対象のpages/*.jsxファイルのコンポーネントが入る形で来ます。
以下にフェードイン・アウトを想定した例です。( TypeScript ) router.routeをCSSTransitionのkeyとして使っています。これはページ移動した時にrouter.routeが切り替わり、古いkeyのものはexitに向かい、新しいkeyのページコンポーネントはenterに向かうような形になります。Componentは1つしかないはずですが、TransitionGroupを使うことでアニメーション動作中に限りそれら新古のページコンポーネントを共存させられます。アニメーション中はTransitionGroupが生かしてくれる為です。
export default class extends App {
addEventListener = (node: HTMLElement, done: () => void) => {
const handle = () => {
node.removeEventListener('transitionend', handle);
done();
};
node.addEventListener('transitionend', handle);
};
render() {
const {Component, pageProps, router} = this.props;
return (
);
}
}ちなみにFadeはstyled-componentsになります。これで.fade-<suffix>クラス名を使いアニメーションを実装します。
import styled from 'styled-components';
const Fade = styled.div`
.fade-enter {}
.fade-enter-active {}
.fade-enter-done {}
.fade-exit {}
.fade-exit-active {}
.fade-exit-done {}
`;
