From 440c62273774ca37448f3b3745e95a366e451550 Mon Sep 17 00:00:00 2001
From: cannorin <cannorin@users.noreply.github.com>
Date: Sun, 9 Feb 2025 17:15:51 +0900
Subject: [PATCH] Add transition for Firefox

---
 apps/web/src/app.css               |  4 ----
 apps/web/src/routes/+layout.svelte | 27 ++++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 9ae08eb..e48a1e8 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -2,10 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@view-transition {
-  navigation: auto;
-}
-
 @layer base {
   :root {
     --foreground: 55 65 81 /* #374151 */;
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 91e334c..95742bc 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -2,10 +2,15 @@
 import "../app.css";
 import "./webfont.css";
 
+import { browser } from "$app/environment";
 import { onNavigate } from "$app/navigation";
 import { page } from "$app/state";
 import Seo, { defaultSeo, mergeSeo } from "$components/seo";
 import { PUBLIC_WEB_DOMAIN } from "$env/static/public";
+import { sineOut } from "svelte/easing";
+import { fade } from "svelte/transition";
+
+let viewTransition = !browser || !!document.startViewTransition;
 
 let { children } = $props();
 let seo = $derived.by(() =>
@@ -30,4 +35,24 @@ onNavigate((navigation) => {
 
 <Seo {...seo} />
 
-{@render children()}
+{#if viewTransition}
+  {@render children()}
+{:else}
+  <div class="grid grid-cols-1">
+    {#key page.url.pathname}
+      <div class="row-start-1 col-start-1" transition:fade={{ duration: 200, easing: sineOut }}>
+        {@render children()}
+      </div>
+    {/key}
+  </div>
+{/if}
+
+<style lang="postcss">
+  @view-transition {
+    navigation: auto;
+  }
+
+  ::view-transition-group(*) {
+    animation-duration: 0.2s;
+  }
+</style>