🐇
Reactでページ遷移アニメーションを実装する
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