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>
|
</script>
|
||||||
|
|
||||||
<div bind:this={node}></div>
|
<div bind:this={node}></div>
|
||||||
|
|
|
@ -1,22 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Path from '$lib/components/Path.svelte';
|
import Path from '$lib/components/Path.svelte';
|
||||||
import Splash from '$lib/components/Splash.svelte';
|
import Splash from '$lib/components/Splash.svelte';
|
||||||
import { onNavigate } from '$app/navigation';
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let categories = data.categories;
|
let categories = data.categories;
|
||||||
|
|
||||||
onNavigate((navigation) => {
|
|
||||||
if (!document.startViewTransition) return;
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
document.startViewTransition(async () => {
|
|
||||||
resolve();
|
|
||||||
await navigation.complete;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Splash />
|
<Splash />
|
||||||
|
|
|
@ -1,19 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Route from '$lib/components/Route.svelte';
|
import Route from '$lib/components/Route.svelte';
|
||||||
import HomeHeader from '$lib/components/HomeHeader.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;
|
export let data;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import Tabs from '$lib/components/Tabs.svelte';
|
import Tabs from '$lib/components/Tabs.svelte';
|
||||||
import { onNavigate } from '$app/navigation';
|
|
||||||
|
|
||||||
export let data: App.Route;
|
export let data: App.Route;
|
||||||
|
|
||||||
onNavigate((navigation) => {
|
|
||||||
if (!document.startViewTransition) return;
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
document.startViewTransition(async () => {
|
|
||||||
resolve();
|
|
||||||
await navigation.complete;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
let divider;
|
let divider;
|
||||||
|
|
||||||
const mapClick = () => {};
|
const mapClick = () => {};
|
||||||
|
|
Loading…
Reference in a new issue