Add transition on layout instead of on each single page
Some checks failed
ci/woodpecker/push/build Pipeline failed

This commit is contained in:
Alessio Davoli 2023-12-12 16:57:28 +01:00
parent 9e7bfc5468
commit 4dffc731b6
4 changed files with 12 additions and 39 deletions

View file

@ -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>

View file

@ -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 />

View file

@ -1,18 +1,6 @@
<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>

View file

@ -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 = () => {};