Merge pull request #198 from Kerosene-Labs/BIL-6-update-fixed

BIL-6: adding page transition

frontend/package.json

@@ -25,15 +25,9 @@
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "@sveltejs/adapter-node": "^5.2.11"
   },
   "dependencies": {
-    "@capacitor/android": "^6.2.0",
-    "@capacitor/app": "^6.0.2",
-    "@capacitor/browser": "^6.0.4",
-    "@capacitor/cli": "^6.2.0",
-    "@capacitor/core": "^6.2.0",
-    "@sveltejs/adapter-node": "^5.2.11",
-    "@sveltejs/adapter-static": "^3.0.6"
   }
 }

frontend/src/lib/components/Nav.svelte

@@ -13,7 +13,7 @@
 <!--please note that our main will clip any content that is overflowing in an effort to maintain a decent user experience-->
 <main class="h-screen max-h-screen min-h-screen overflow-clip">
   <div
-    id="appBar"
+    id="appbar"
     class="absolute z-30 flex h-14 max-h-14 w-screen flex-row items-center bg-zinc-100 dark:bg-neutral-800 px-4"
   >
     <button aria-label="App Drawer Toggle" on:click={toggleDrawer}>
@@ -152,3 +152,9 @@
     <slot></slot>
   </div>
 </main>
+
+<style lang="postcss">
+  #appbar {
+      view-transition-name: header;
+  }
+</style>

frontend/src/routes/+layout.svelte

@@ -1,9 +1,61 @@
 <script lang="ts">
   import "../app.css";
   import ToastQueue from "$lib/tk/ToastQueue.svelte";
+  import { onNavigate } from "$app/navigation";
 
   let { children } = $props();
+
+
+  onNavigate((navigation) => {
+    if (!document.startViewTransition) return;
+
+    return new Promise((resolve) => {
+      document.startViewTransition(async () => {
+        resolve();
+        await navigation.complete;
+      });
+    });
+  });
+
 </script>
 
 <ToastQueue></ToastQueue>
 {@render children()}
+
+<style lang="postcss">
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fade-out {
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes in {
+        from {
+            transform: translateY(30px);
+        }
+    }
+
+    @keyframes out {
+        to {
+            transform: translateY(-30px);
+        }
+    }
+
+    :root::view-transition-old(root) {
+        animation:
+                90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+                300ms cubic-bezier(0.4, 0, 0.2, 1) both out;
+    }
+
+    :root::view-transition-new(root) {
+        animation:
+                210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+                300ms cubic-bezier(0.4, 0, 0.2, 1) both in;
+    }
+</style>