gsap-nuxt

GSAP Nuxt

マウント → 初期状態 → イントロ → 安定状態 → アウトロ → 終了状態 → アンマウント

マウントとアンマウントは Vue が担い、その間の 5 つのフェーズはアニメーションが担います。Nuxt のページ遷移で離脱する際、コンポーネントは破棄されますが、ルート要素は done が呼び出されるまで残ります。遷移フック（css: false）は、コンポーネントのクリーンアップとは独立してアウトロを管理する必要があります。

指定された見た目と既存のプロジェクト規約を維持してください。必要な場合に限り GSAP／プラグインを追加し、依頼されない限り選定済みのアニメーションライブラリを置き換えないでください。

このスキルは、モーションをいつ実行するかを決めます。何を動かすか、またはプレミアムや遊び心のある雰囲気にする方法については、animaxxing スキルがインストールされている場合は、それも読み込んでください。そのレシピと雰囲気を見つけるためのガイドは、このライフサイクルに組み込めます。

プロジェクトから始める

リポジトリの指示、既存のアニメーション、レイアウト、ナビゲーション、CSS、アクセシビリティの規約、チェック項目を確認してください。その後、以下を行います。

1. pages/ ディレクトリを持つ Nuxt プロジェクトであることを確認します。Nuxt ではなく、Vue Router を使用する通常の Vue プロジェクトの場合、このスキルの対象外であることを伝え、gsap-frameworks を使用してください。
2. node_modules から、インストール済みの Nuxt、Vue、Vue Router のバージョンを確認します。記憶に頼らず、インストール済みの型とその JSDoc（node_modules/@nuxt/schema、node_modules/nuxt/dist、node_modules/@vue/runtime-core/dist、node_modules/vue-router/dist）、および該当バージョンのドキュメントを優先してください。バージョン要件：onPrehydrate（3.12）、useRuntimeHook（3.14）、app/ ソースディレクトリ（4）、View Transition の型（4.4）、<NuxtLink custom> スロット内の prefetch（4.5）。
3. nuxt.config の ssr、srcDir、app.pageTransition、app.layoutTransition、app.keepalive、experimental.viewTransition、future.compatibilityVersion を確認します。Nuxt 4 では pages/、layouts/、middleware/、plugins/、composables/、app.vue、router.options.ts は app/ の下に置かれます。Nuxt 3 ではルート直下に置かれます。どちらの場合も ~/ はソースディレクトリを指します。

エンジンを選ぶ

シンプルなページのフェード／スライドには Vue Transition CSS、スナップショットのモーフィングには experimental.viewTransition、ライブ DOM のアウトロ、シーケンス、割り込み、または制御された重なりには GSAP JavaScript フックを使用します。要素ごとにエンジンは 1 つだけ使用し、同じナビゲーションで Vue フックと View Transition を併用しないでください。View Transitions を参照してください。

必要な情報だけを読む

• 表示されないイントロ、初期化の失敗、インデックス作成、初回読み込みのパフォーマンス：初期化と復旧、およびフレームワークとの統合。
• フック、done、モード、離脱開始時に破棄されるもの、初回読み込み、レイアウト、方向、割り込み：ページ遷移。
• ページキー、キープアライブ、Nuxt アプリフック、スクロールとフォーカス、ナビゲーション前のアウトロ、戻る／進む、View Transitions、SSR と初回描画：ナビゲーション。
• 5 つのフェーズ、GSAP のセットアップ、Vue ライフサイクル、表示と非表示、レイアウトの安定性、スクロール、テキスト、プラグイン：ライフサイクルの実装。
• Lenis、ScrollSmoother、またはルート間でイージングするページスクロール：スムーズスクロール、およびフックの対応付け。
• カーテン、初回訪問時のプリローダー、共有要素のモーフィング：遷移の種類、app.vue との統合、および共有要素。
• タッチ、ビューポートの変化、デバイスの予算：デバイスと入力。
• Tauri、Electron、または Wails のデスクトップシェル：デスクトップ WebView。
• 作業完了とする前に：検証。

このリポジトリと併せて公式 GSAP スキルをインストールしてください。API の詳細には gsap-core を、コンポーネントのセットアップには必要に応じて gsap-frameworks を読み込みます。

ルール

• セットアップ成功時は非表示の初期表示を維持し、失敗時は現在の遷移元を復元します。非表示ルールを追加する前に、初期化の契約に従ってください。
• GSAP はクライアントでのみ実行します。import.meta.client、onMounted、または<ClientOnly>でガードします。セレクターのスコープを限定してください。すべてのトゥイーン、トリガー、分割、リスナーをクリーンアップします。
• 通常の CSS と安定したラッパーで最終的なジオメトリを確保し、レイアウト領域を二重に取らずに遷移元と遷移先のコンテンツを重ねます。ページとレイアウトには単一のルート要素が必要です。そうでない場合、遷移は実行されません。
• マウントしてから初期値を設定し、その後に描画します。onBeforeEnterは遷移先のルートが挿入される前に、onEnterは挿入直後、ブラウザーが描画する前に実行されます。初期化成功時には、イントロの前に最終状態のコンテンツが一瞬表示されることはありません。
• 最終状態では一時的なスタイルをクリアします。will-changeはアニメーション中のみ使用してください。これはgsap-performanceの静的なヒントより優先されます。
• デバイスの段階には機能クエリを使用します。タッチ状態は解除されるようにし、ホバーなしでも操作できるようにします。
• 必ずdoneを呼び出します。onCompleteから、onInterruptから、そして動きを減らす設定の場合は同期的に呼び出してください。doneを呼び出さない leave は、古いページを永久に DOM 内に残します。
• leave の開始時にページコンポーネントはアンマウントされるか、keepalive の場合は非アクティブ化されます。終了時ではありません。アウトロの再生中に、そのコンテキストの revert とonUnmountedが実行されます。アウトロは、フックが管理するコンテキスト内で、elを対象にonLeaveで構築してください。
• アウトロと最終状態の間は、遷移元のページとコンポーネントを DOM 内に維持します。doneを待機させれば、Vue はこれを行います。
• 遷移先のページが解決される前に、アウトロを開始することはできません。待機の設計を行ってください。古いページは画面上に残り、操作可能な状態です。
• keepalive の場合、再アクティブ化時にページのライフサイクルが再度実行されますが、DOM には最終状態の値がすでに設定されています。新しいノードであると決めつけないでください。
• 戻る操作と進む操作でも、クリックと同じフックが実行されます。履歴ナビゲーションを自分で検出し、より控えめな経路を用意してください。発生していないアウトロを偽装してはいけません。
• サーバーレンダリングされたページでappearを使用してはいけません。Vue の SSR は<Transition appear>の子を<template>でラップするため、ハイドレーションが完了するまでページが空白になり、JavaScript がない場合も表示されません。
• ネイティブのリンク動作、フォーカス、スクロール、JavaScript が無効な場合の可読性を維持します。
• 動きを減らす設定でも同じ最終状態に到達し、doneとすべての完了コールバックを呼び出します。
• 中断や連続クリック時の動作を定義します。完了時にナビゲーションの待機が必ず一度だけ解除されるようにしてください。
• 可能であれば実際のブラウザーで検証してください。ルート、設定、依存関係、またはリリースに関する変更では、本番ビルドを使用してください。