diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/(app)/+layout.svelte | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 3422d358..5aa46242 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -9,9 +9,21 @@ import { LoadingSplash, Invoice, Password, Request } from '$comp'; import { warning, protectedRoutes } from '$lib/utils'; import { t, locale } from '$lib/translations'; + import { onNavigate } from '$app/navigation'; export let data; + onNavigate((navigation) => { + if (!document.startViewTransition) return; + + return new Promise((resolve) => { + document.startViewTransition(async () => { + resolve(); + await navigation.complete; + }); + }); + }); + let { rate, user, subject, token, rates } = data; $: update(data); @@ -116,3 +128,39 @@ {#if $request} <Request {user} /> {/if} + +<style> + @keyframes fade-in { + from { + opacity: 0; + } + } + + @keyframes fade-out { + to { + opacity: 0; + } + } + + @keyframes slide-from-right { + from { + transform: translateX(60px); + } + } + + @keyframes slide-to-left { + to { + transform: translateX(-60px); + } + } + + :root::view-transition-old(root) { + animation: 280ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; + } + + :root::view-transition-new(root) { + animation: 280ms cubic-bezier(0, 0, 0.2, 1) 80ms both fade-in, + 180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; + } +</style> |