はじめに

一般的なWebサイトの場合、あるリンクをクリックしたときに画面遷移が発生します。ブラウザは遷移先の URL を読み込んで画面全体を再描画します。

SPA(Single Page Application) の場合は画面全体の再描画ではなく部分的に再描画されます。例えばヘッダ領域はそのままで、メイン領域を再描画する、という感じです。この際、あまりにも早く切り替わってしまうためユーザーは何が起きたか認識しづらいケースがあります。

例えば実物の書籍であればページをめくることで次のページに遷移したことを認識できます。Webサイトでもそのような認識しやすさを導入できると良いですよね。

これを簡単に実現するために view transitions API という仕組みがあります。

2023年9月13日現在はまだ実験段階のようです。
https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition

SvelteKit 1.24 で view transitions API を使って簡単に画面遷移にアニメーションを導入できることがこちらのブログに掲載されていました。

今回は上記ブログを参考にして view transition API を試してみました。

実装

実装は簡単です。 src/routes/+layout.svelte に以下を記載するだけです。

src/routes/+layout.svelte

<script>
...
import { onNavigate } from '$app/navigation';
...

onNavigate((navigation) => {
    if (!document.startViewTransition) return;

    return new Promise((resolve) => {
        document.startViewTransition(async () => {
            resolve();
            await navigation.complete;
        });
    });
});
</script>

src/routes/+layout.svelte が何なのかを知りたい方はこちらのチュートリアル（日本語）をご確認ください。

動作確認

こちらで動作確認できます。（※Chrome で確認するのがおすすめです）

other リンクをクリックすると、現在の画面がフェードアウトしつつ other 画面がフェードインするのが分かると思います。

まとめ

SvelteKit 1.24 で view transition API を使って認識しやすいスムーズな画面遷移を実現できることが分かりました。startViewTransition() メソッドの各ブラウザの対応状況を見るとまだ半分ぐらいといったところですが、今後はすべてのブラウザで実装されると思われます。画面遷移のユーザビリティに革命（？）が起きるかもしれませんね。