フェードトランジション

フェードイン/アウト効果でページをスムーズに切り替える

フェードトランジション

フェードトランジションは、最も基本的でありながらエレガントなページ遷移効果です。現在のページが徐々に消えていき、新しいページが現れるスムーズな遷移を提供します。

基本的な使い方

import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: fade()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* アプリケーションコンテンツ */}
    </Ssgoi>
  );
}

オプション

フェードトランジションはスプリングアニメーション設定をカスタマイズできます：

fade({
  spring: {
    stiffness: 300,  // スプリングの硬さ（デフォルト：300）
    damping: 30      // 減衰係数（デフォルト：30）
  }
})

スプリングオプションの説明

stiffness: アニメーションの速度を制御します。値が大きいほど速い遷移
damping: アニメーションのバウンスを制御します。値が大きいほどスムーズな遷移

使用例

ゆっくりしたフェード

スムーズでゆっくりとしたフェード効果：

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 100,
      damping: 20
    }
  })
};

速いフェード

素早くキレのあるフェード効果：

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 500,
      damping: 40
    }
  })
};

特定のルートへの適用

const config = {
  transitions: [
    {
      from: '/home',
      to: '/about', 
      transition: fade(),
      symmetric: true  // /about → /home も自動的にフェードを適用
    }
  ]
};

<Ssgoi config={config}>
  {/* アプリケーションコンテンツ */}
</Ssgoi>

動作原理

フェードトランジションは次のように動作します：

出ていくページ: 不透明度が1から0へ減少
入ってくるページ: 不透明度が0から1へ増加
両方のアニメーションが同時に実行され、自然なクロスフェード効果を作成

利点

すべてのコンテンツタイプに適した汎用的なトランジション
CPU/GPU負荷が少ない軽量なアニメーション
視覚的にスムーズでプロフェッショナルな外観
方向性がなく、どのナビゲーションパターンでも自然に動作

推奨される使用ケース

デフォルトのページ遷移
関連性のないコンテンツページ間のナビゲーション
落ち着いたエレガントなユーザー体験が必要な場合
パフォーマンスが重要なモバイル環境