vercel-react-view-transitions
Reactアプリにネイティブビュートランジションを追加
Reactアプリにスムーズなページ遷移と共有要素アニメーションを追加するには、View Transitions APIとその統合パターンを理解する必要があります。このスキルは、Vercel LabsによるCSSレシピとNext.jsパターンを使用したステップバイステップのガイダンスを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「vercel-react-view-transitions」を使用しています。 商品リストにトランジションを追加して
期待される結果:
商品アイテムを一意のキーを持つ<ViewTransition>でラップし、::view-transition-old/new擬似要素のCSSを追加し、state変更時にアニメーションをトリガーするためにstartTransitionを使用してください。
「vercel-react-view-transitions」を使用しています。 なぜブラウザの前へボタンがアニメーションしないのですか？
期待される結果:
ブラウザの前へ/戻るボタンは同期的なpopstateイベントを使用するため、startViewTransitionと互換性がありません。明示的なURLでrouter.push()を使用してアニメーションサポートを維持してください。
「vercel-react-view-transitions」を使用しています。 リストの再配置をアニメーション化するにはどうすればいいですか？
期待される結果:
各アイテムのIDを使用して一意のview-transition-name値を割り当てます。アイテムが再配置されると、ブラウザは自動的に位置変更をキャプチャしスムーズにアニメーション化します。
セキュリティ監査
安全All static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).
品質スコア
作れるもの
Next.js Appにページ遷移を追加
App Routerとexperimental viewTransitionフラグを使用して、Next.jsアプリケーションでルート間をナビゲートする際のスムーズなスライド遷移を実装します。
共有要素アニメーションを作成
商品画像がグリッドカードから詳細ページビューへ滑らかに变形するようにしネイティブモバイルアプリのようなプレミアム感を演出します。
データ読み込み状態をアニメーション化
データのフェッチ後にコンテンツが表示される際にスムーズなSuspense表示に置き換え、コンテンツの急激なちらつきを防止します。
これらのプロンプトを試す
ナビゲーション時にページがスライドインするように、私のNext.jsアプリにビュートランジションを追加して
商品グリッドを持っています。商品をクリック했을 때、画像がグリッドから詳細ページのヒーローへアニメーションする必要がある
Suspenseが解決されるとビュートランジションが壊れてしまいます。ネストされたアニメーションがページ遷移に干渉しないようにするにはどうすればいいですか？
アプリに空間的深度を感じさせることができるように、ユーザーが逆方向にスライドする前方と後方のナビゲーションアニメーションを実装して
ベストプラクティス
- 監査ステップから始める - コードを書く前に遷移が必要なすべての場所を特定する
- カスタムアニメーションをゼロから書くよりも、スキルからCSSレシピをコピーする
- 常にreduced-motion設定でテストし、古いブラウザのための段階的な低下を実装する
回避
- document.startViewTransition()を直接呼び出さない - ViewTransitionコンポーネントに処理させる
- 横方向のナビゲーション（タブ）では方向性のあるスライドを避ける - これは誤った空間的深度を暗示する
- ViewTransitionをdiv内にラップしない - 入場/退場を有効にするにはコンポーネントが外側のラッパーである必要がある