From 57829cee26807317d3448abd0502da21fe33097f Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Mon, 24 Feb 2025 16:38:07 -0600
Subject: [PATCH] feat(web): slight fade in animation when open/close
 asset-viewer (#16262)

---
 web/src/app.css                 |  5 +++++
 web/src/lib/utils/navigation.ts | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 1127b60624..5175982f0f 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -168,3 +168,8 @@ input:focus-visible {
     scrollbar-gutter: stable both-edges;
   }
 }
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 250ms;
+}
diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index 41eb5ee73b..71dbb8d067 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -112,7 +112,7 @@ async function navigateAssetRoute(route: AssetRoute, options?: NavOptions) {
   const next = assetId ? currentUrlReplaceAssetId(assetId) : currentUrlWithoutAsset();
   const current = currentUrl();
   if (next !== current || options?.forceNavigate) {
-    await goto(next, options);
+    await navigateWithTransition(next, options);
   }
 }
 
@@ -122,7 +122,7 @@ async function navigateAssetGridRoute(route: AssetGridRoute, options?: NavOption
   const next = replaceScrollTarget(assetUrl, assetGridScrollTarget);
   const current = currentUrl();
   if (next !== current || options?.forceNavigate) {
-    await goto(next, options);
+    await navigateWithTransition(next, options);
   }
 }
 
@@ -136,6 +136,16 @@ export function navigate(change: ImmichRoute, options?: NavOptions): Promise<voi
   throw `Invalid navigation: ${JSON.stringify(change)}`;
 }
 
+async function navigateWithTransition(url: string, options?: NavOptions) {
+  if (document.startViewTransition) {
+    document.startViewTransition(async () => {
+      await goto(url, options);
+    });
+  } else {
+    await goto(url, options);
+  }
+}
+
 export const clearQueryParam = async (queryParam: string, url: URL) => {
   if (url.searchParams.has(queryParam)) {
     url.searchParams.delete(queryParam);