View Transitions APIを実装する上で対応済のブラウザと非対応のブラウザを条件分岐で最低限動くようにする方法

View Transitions APIとは

数ヶ月前にChromeで実装されて話題になりましたが、ページ遷移などの際に画像に連続性を持たせてくれるものです。今回は下記の記事で解説されているものを参考にさせていただきました。View Transitions APIを知らないという方は下記の記事を読んでいただくとすごくわかりやすいかと思います。紹介してくれているサイト自体にもView Transitions APIが使われているので、そのままサイト内を見て回ると実例まで見れちゃいます。

https://ics.media/entry/230510/

View Transitions APIはChrome,Edgeのみの対応です

View Transitions APIを再現するポリフィルを提供するものではありません。

今View Transitions APIを実装してみると…

現在ChromeとEdgeしか対応していない状況で仮にView Transitions APIの動きをモーダルで実装しようとすると、対応していないブラウザでは全く動かなくなってしまいます。

何の対策もしていないFirefox,Safariでは動かないモーダル

なぜモーダル自体が動かないのか

対応していないからといえばそれまでなのですが、View Transitions APIの動きは実装できなくともモーダルの動きは残ったらいいなと考えていました。エラーメッセージを見れば一目瞭然なのですがView Transitions APIで使用される関数(startViewTransition)がありませんよーというエラーが吐き出されますのでこれが原因です。

A.非対応なのでView Transitions API用のコードだとdocument.startViewTransitionが無いから

解決法startViewTransitionsの有無で条件分岐

以下の文で対応ブラウザではture非対応ブラウザではfalseが出力されます

　// ture:対応　false:非対応
console.log(Boolean(document.startViewTransition));

なので条件分岐はこうなります

if(document.startViewTransition){
    //View Transitions APIを使用する処理
    console.log("対応してるよ！！");
} else {
    //View Transitions APIを使用しない処理
    console.log("非対応だよ！！");
};

対応ブラウザではView Transitions APIの動き、非対応ブラウザでは最低限の動きをするモーダルの完成

まとめ

他のブラウザごとによって対応状況がまちまちな技術を対応ブラウザだけでいいから使用したいという際に広く使用できるなと思いました。最初はそもそもの問題がわからなく気づけば2時間ほどの時間を使用して車輪の再開発をしていたようなものですし蓋を開ければ簡単な話だったのですが…誰かの助けになれば幸いです。
最後まで読んでいただきまして、ありがとうございました。失礼いたします。

参考記事

ICS MEDIA様 ： View Transitions API入門