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