速習 View Transition API

2025/11/07(金) フロントエンド勉強会 in 大阪@Kansai Dev Garage
https://kansai-web-app-dev.connpass.com/event/371862/

Transcript

1. 速習 View Transition API 
 2025/11/7 フロントエンド勉強会 in 大阪 

2. @high_g_engineer 
 - KINTOテクノロジーズ（株）所属 
 - フロントエンドエンジニア 
 - フロントエンドカンファレンス関西実行委員 
 - TSKaigi 2025, TSKaigi Kansai Staff 
 谷 郁弥 (high-g) 

3. View Transition APIの概要 

4. View Transition APIの概要 
 • シームレスな遷移アニメーションを標準機能で簡単に実装できるAPI
 • MPA、SPAのそれぞれで実装することが可能
 • これまで遷移アニメーション実装の際、JSやCSSで複雑なコードを書いたり、座標 計算したり、ページ遷移アニメーション系のライブラリを頼る必要があった
 

5. View Transition API 実装状況 

6. View Transition APIの概要 
 • Chrome 111（2023年3月1日リリース）でサポート
 • Safari 18.2（2024年12月11日リリース）でサポート
 • Reactでは、react@experimentalでViewTransitionコンポーネントが実験的な機能とし て提供（現在はreact@canaryで提供）
 • Firefox 144（2025年10月14日）← NEW 
 ◦ まだ基本的な機能のみのサポート
 

7. すべてのモダンブラウザに組み込まれ、 
 Baseline の Newly Available に加わった 

8. View Transition API は Interop 2025 の重点領域の一つ 
 Interop = Webブラウザ間の互換性を高めるプロジェクト
9. どんな挙動をするか 

12. MPAで実装する場合 

13. MPAでフェードイン・フェードアウトを実装する場合 
 この記述だけで、同一オリジン間のページ遷移でフェードイン・フェードアウトのアニメーションが適用 

14. MPAで要素のアニメーションを実装する場合 
 index.html detail.html
15. MPAで要素のアニメーションを実装する場合 
 index.html detail.html
16. Reactで実装する場合 
 ※SPA実装のバニラ実装は省略！
20. startTransitionを利用することで、ノンブロッキングでstateを更新可能 
 ViewTransitionコンポーネントはstateの更新を検知し、遷移アニメーションを実行 

21. まとめ

22. まとめ
 • View Transition APIは、シームレスな遷移アニメーション簡単に実装可能
 • MPA、SPAのそれぞれで実装することが可能
 • 今後、FEフレームワークでもView Transition APIが宣言的に利用可能

23. ご清聴ありがとうございました