Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-02 21:24:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): slight fade in animation when open/close asset-viewer (#16262)

Browse Source
This commit is contained in:
Alex 2025-02-24 16:38:07 -06:00 committed by GitHub
parent 4be2351d21
commit 57829cee26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/app.css
View File

@ -168,3 +168,8 @@ input:focus-visible {
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
} }
} }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 250ms;
}

14
web/src/lib/utils/navigation.ts
View File

@ -112,7 +112,7 @@ async function navigateAssetRoute(route: AssetRoute, options?: NavOptions) {
const next = assetId ? currentUrlReplaceAssetId(assetId) : currentUrlWithoutAsset(); const next = assetId ? currentUrlReplaceAssetId(assetId) : currentUrlWithoutAsset();
const current = currentUrl(); const current = currentUrl();
if (next !== current || options?.forceNavigate) { 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 next = replaceScrollTarget(assetUrl, assetGridScrollTarget);
const current = currentUrl(); const current = currentUrl();
if (next !== current || options?.forceNavigate) { 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)}`; 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) => { export const clearQueryParam = async (queryParam: string, url: URL) => {
if (url.searchParams.has(queryParam)) { if (url.searchParams.has(queryParam)) {
url.searchParams.delete(queryParam); url.searchParams.delete(queryParam);