スライドトランジション

同じレベルのコンテンツ間の水平スライド遷移

スライドトランジション

スライドトランジションは、同じレベルの兄弟コンテンツ間のナビゲーション時にページが横にスライドする効果を作成します。タブナビゲーションやステップベースのUIで自然な水平移動体験を提供します。

デモ

localhost:3000/slide/clothing

Shop Collection

2024 Summer Collection

Clothing

6 items

👔

Classic White Tee

$29

🧥

Denim Jacket

$79

👗

Summer Dress

$59

🧶

Wool Sweater

$89

👔

Casual Shirt

$45

🧥

Winter Coat

$199

Loading demo...

UXの原則

いつ使用するか？

スライドトランジションは水平コンテンツナビゲーションに使用されます。

コンテンツ関係による適合性

콘텐츠 관계	적합성	설명
無関係なコンテンツ	❌	独立したセクションではフェードを使用
兄弟関係	✅	同レベルのタブやステップに最適
階層関係	❌	親子構造ではドリルやヒーローを使用

主な使用例

タブナビゲーション：タブUIでのコンテンツ切り替え
画像ギャラリー：画像間のスワイプ遷移
設定画面：カテゴリ間の水平移動
オンボーディングステップ：段階的な進行画面

なぜこのように動作するのか？

水平ジェスチャーとの一致：モバイルの左右スワイプと自然に連携
タブのメタファー：物理的なタブをめくるような直感的な体験
方向の認識：前進/後退の方向を視覚的に表現

モーションデザイン

LEFT方向（次へ）：
出ていく画面：左に押し出される（現在のコンテンツが左へ）
入ってくる画面：右から入る（次のコンテンツが表示）

RIGHT方向（前へ）：
出ていく画面：右に押し出される（現在のコンテンツが右へ）
入ってくる画面：左から入る（前のコンテンツが戻る）

基本的な使い方

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

const config = {
  defaultTransition: slide()
};

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

実践例

1. タブナビゲーション

タブUIでのコンテンツ切り替え：

const config = {
  transitions: [
    {
      from: '/tabs/home',
      to: '/tabs/profile',
      transition: slide({ direction: 'left' }),
      symmetric: true  // 戻るナビゲーション時に自動的に右へ
    },
    {
      from: '/tabs/profile',
      to: '/tabs/settings',
      transition: slide({ direction: 'left' }),
      symmetric: true
    }
  ]
};

2. 画像ギャラリー

画像間のスワイプ遷移：

const config = {
  transitions: [
    {
      from: '/gallery/photo-*',
      to: '/gallery/photo-*',
      transition: slide({
        direction: 'left',
        spring: { stiffness: 300, damping: 30 }
      })
    }
  ]
};

3. ミドルウェアを介した動的方向

タブ順序に基づいて方向を自動的に決定：

const createMiddleware = (tabs) => {
  return (from, to) => {
    const fromIndex = tabs.indexOf(from);
    const toIndex = tabs.indexOf(to);

    if (fromIndex < toIndex) {
      return { from: "/nav/left", to: "/nav/right" };
    } else {
      return { from: "/nav/right", to: "/nav/left" };
    }
  };
};

const config = {
  transitions: [
    {
      from: "/nav/left",
      to: "/nav/right",
      transition: slide({ direction: "left" })
    },
    {
      from: "/nav/right",
      to: "/nav/left",
      transition: slide({ direction: "right" })
    }
  ],
  middleware: createMiddleware(tabOrder)
};