transitions on app pages

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>