SvelteKit 1.24 で view transitions API を使ってスムーズな画面遷移を実現する方法が簡単だった！

はじめに

一般的な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() メソッドの各ブラウザの 対応状況 を見るとまだ半分ぐらいといったところですが、今後はすべてのブラウザで実装されると思われます。画面遷移のユーザビリティに革命（？）が起きるかもしれませんね。