Peaks and Valleys

SvelteKit でお手軽に View Transition API を導入する

- ほんとうに導入だけ

TL;DR

この記事を見る: Unlocking view transitions in SvelteKit 1.24

1.5年前くらいの記事ではあるが、特に何かを変更する必要はなさそうだった。

最低限必要な箇所だけ抜き出すと

+layout.svelte に以下のコードを追加

import { onNavigate } from '$app/navigation';

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

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

グローバルに適用される CSS に以下のコードを追加する

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

prefers-reduced-motion は端末のアニメーションを減らす設定がされているかを判断するメディア特性。 有効化されている場合は遷移アニメーションもなしにしましょう、ということ。