Add transition on layout instead of on each single page
Some checks failed
ci/woodpecker/push/build Pipeline failed
Some checks failed
ci/woodpecker/push/build Pipeline failed
This commit is contained in:
parent
9e7bfc5468
commit
4dffc731b6
4 changed files with 12 additions and 39 deletions
|
@ -29,6 +29,17 @@
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
onNavigate((navigation: { complete: any; }) => {
|
||||
if (!(document.startViewTransition)) return;
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
document?.startViewTransition(async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={node}></div>
|
||||
|
|
|
@ -1,22 +1,9 @@
|
|||
<script lang="ts">
|
||||
import Path from '$lib/components/Path.svelte';
|
||||
import Splash from '$lib/components/Splash.svelte';
|
||||
import { onNavigate } from '$app/navigation';
|
||||
|
||||
export let data;
|
||||
let categories = data.categories;
|
||||
|
||||
onNavigate((navigation) => {
|
||||
if (!document.startViewTransition) return;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
document.startViewTransition(async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<Splash />
|
||||
|
|
|
@ -1,19 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Route from '$lib/components/Route.svelte';
|
||||
import HomeHeader from '$lib/components/HomeHeader.svelte';
|
||||
import { onNavigate } from '$app/navigation';
|
||||
|
||||
onNavigate((navigation) => {
|
||||
if (!document.startViewTransition) return;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
document.startViewTransition(async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,22 +1,9 @@
|
|||
<script lang="ts">
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Tabs from '$lib/components/Tabs.svelte';
|
||||
import { onNavigate } from '$app/navigation';
|
||||
|
||||
export let data: App.Route;
|
||||
|
||||
onNavigate((navigation) => {
|
||||
if (!document.startViewTransition) return;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
document.startViewTransition(async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
let divider;
|
||||
|
||||
const mapClick = () => {};
|
||||
|
|
Loading…
Reference in a new issue