From da8cbb695c9516130ba6ed8f14b922f260d2f0c6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 30 Nov 2023 16:49:54 -0800
Subject: transitions on app pages

---
 src/routes/(app)/+layout.svelte | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

(limited to 'src')

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>
-- 
cgit v1.2.3