画像ギャラリーナビゲーションのためのView Transitions API

この実装は、ギャラリー内の画像間でスムーズなネイティブライクな遷移を作成するためのView Transitions APIをデモンストレーションしています。メイン画像は、矢印ボタンまたはサムネイルナビゲーションを使用して画像間を移動する際に、スムーズにクロスフェードおよびスケーリングします。

View Transitions APIは、異なるDOM状態間でスムーズな遷移を作成できる最新のブラウザ機能です。この例では、ギャラリー画像を変更する際にメイン画像をアニメーション化するために使用しています。このAPIは古い状態のキャプチャを作成し、DOMを更新し、新しい状態をキャプチャして、それらの間をアニメーション化します。

主な機能：

• 画像間のスムーズなクロスフェードとスケールアニメーション
• アクティブ状態のハイライト付きサムネイルナビゲーション
• キーボードナビゲーションのサポート（矢印キー）
• すべての画面サイズで動作するレスポンシブデザイン
• View Transitions APIをサポートしていないブラウザのためのフォールバック
• 遷移効果のためのカスタムCSSアニメーション

この実装では、::view-transition-groupおよび::view-transition-new/old疑似要素を使用して遷移アニメーションをカスタマイズしています。メイン画像には、アニメーション化する要素として識別するためのview-transition-nameプロパティがあります。