add transition

This commit is contained in:
Fractal-Tess
2022-12-21 02:57:50 +02:00
parent 0898d6ed5f
commit 90172efa4b
2 changed files with 19 additions and 5 deletions

View File

@@ -0,0 +1,10 @@
<script>
import { router } from 'tinro';
import { fade } from 'svelte/transition';
</script>
{#key $router.path}
<div in:fade={{ duration: 700 }} class="h-full w-full">
<slot />
</div>
{/key}

View File

@@ -1,15 +1,19 @@
<script lang="ts">
import { Route } from 'tinro';
import { Route, router } from 'tinro';
router.mode.hash();
import Index from '$lib/router/routes/Index.svelte';
import CallTauri from '$router/routes/CallTauri.svelte';
import HashString from '$router/routes/HashString.svelte';
import Versions from '$router/routes/Versions.svelte';
import Transition from '$lib/components/transition/Transition.svelte';
</script>
<!-- Fix for linting errors: ->
https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
<Route path="/"><Index /></Route>
<Route path="/call-tauri"><CallTauri /></Route>
<Route path="/hash-string"><HashString /></Route>
<Route path="/versions"><Versions /></Route>
<Transition>
<Route path="/"><Index /></Route>
<Route path="/call-tauri"><CallTauri /></Route>
<Route path="/hash-string"><HashString /></Route>
<Route path="/versions"><Versions /></Route>
</Transition>