Shared Element Transitions https://github.com/WICG/shared-element-transitions

ドキュメントloadイベント間に任意のコードを実行して画面のトランジションを実装するためのWeb API仕様。

Island Architecture の話でMPAはこれができんよなと言っていたけどやはりみんなそう思っているらしく、この解決策が提案されていた。

Shared Element Transitionsと聞き覚えのある名称はAndroid Activity——というかマテリアルデザイン意識したものらしい。

developer.android.com

https://http203-playlist.netlify.app/ のデモは効いてるか効いてないのかイマイチよく分からないけどhttps://simple-set-demos.glitch.me/4-fixed-header/ のデモはChromeでフラグをオンにするとブラウザで実装されていると思われるアニメーションでシュッと画面の読み込みが走る。

アニメーションはCSSでプロパティをカスタマイズできる。

中身を読んでみるとブラウザ上ではこういうコードが宣言されている。

navigation.addEventListener('navigate', (event) => {
  const response = await fetch(event.destination.url);
    const text = await response.text();  
    const transition = document.createDocumentTransition();
    transition.start(() => {
        document.body.innerHTML = /<body[^>]*>([\w\W]*)<\/body>/.exec(text)[1];
    });
});

ブラウザで起こるイベントはloadしてfetchしてloadしてだから未対応な環境では単に2つのloadが走るだけで、プログレッシブに使えますねということだと思う。

でも2回リクエスト走るとのかという部分や、従来のSPAのダウンロード済みのデータでオフラインで次の画面に変形するのと比べてどういう利点がありそうなのかはまだ定かではない。

サーバーやCDNキャッシュに処理が寄せられるとか、push/popナビゲーションとかprepend/dismissとかモーダルダイアログとかがブラウザやフレームワーク側に基本のトランジションが乗ってて、開発者はそれを指定するだけだと楽そうとかは考えられる。