🐇

Reactでページ遷移アニメーションを実装する

2025/01/13に公開

Reactアプリケーションでページ遷移時にアニメーションを追加すると、ユーザー体験が大幅に向上します。今回は、フェードイン・フェードアウトのアニメーションを実装する方法を解説します。

なぜページ遷移アニメーションが必要?

  • ユーザー体験の向上:突然のページ切り替えよりも、スムーズな遷移の方が快適
  • アプリの高級感:プロフェッショナルな印象を与える
  • ユーザーの理解促進:画面の変化を視覚的に理解しやすくなる

実装に必要なもの

  • react-router-dom:ルーティング用のパッケージ
  • react-transition-group:アニメーション実装用のパッケージ

基本的な実装手順

1. パッケージのインストール

npm install react-router-dom react-transition-group

2. AnimatedRoutesコンポーネントの作成

以下のようなコンポーネントを作成します:

// AnimatedRoutes.js
import { Routes, Route, useLocation } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const AnimatedRoutes = () => {
  const location = useLocation();

  return (
    <TransitionGroup>
      <CSSTransition
        key={location.pathname}
        timeout={300}
        classNames="fade"
      >
        <Routes location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* 他のルート */}
        </Routes>
      </CSSTransition>
    </TransitionGroup>
  );
};

export default AnimatedRoutes;

3. CSSの設定

アニメーションのスタイルを定義します:

/* styles.css */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

実装時の注意点

  • コンポーネントの配置: AnimatedRoutesコンポーネントはアプリのルートに近い位置に配置します
  • 状態管理との併用: ReduxやContext APIを使用している場合は、それらのProviderの内側に配置する必要があります
  • パフォーマンス考慮: アニメーションの時間は短めに設定し、ユーザーのストレスにならないようにします

よくある問題と解決方法

  • アニメーションが動作しない

    以下を確認してください:

    • CSSクラス名が正しいか
    • タイミングの設定は適切か
    • コンポーネントの配置順序は正しいか
  • ページ遷移が遅く感じる

    以下の対策を試してください:

    • アニメーション時間の短縮
    • 不要なコンポーネントのアンマウント
    • コード分割の実装

まとめ

ページ遷移アニメーションは、少しの実装で大きな効果が得られる機能です。基本的な流れを押さえて、プロジェクトに合わせてカスタマイズしていきましょう。

Discussion