feat(web): hero view transitions for memory viewer

Change-Id: I6221557a6b8561122baccbc651a48ae46a6a6964
This commit is contained in:
midzelis
2026-03-19 01:41:07 +00:00
parent 682bbce88e
commit aa9234ec5c
5 changed files with 765 additions and 161 deletions
+21 -2
View File
@@ -2,14 +2,15 @@ import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
import { tick } from 'svelte';
export function startViewerTransition(
function startHeroTransition(
type: string,
heroAssetId: string,
openViewer: () => void,
activateHeroAsset: (assetId: string) => void,
deactivateHeroAsset: () => void,
) {
void viewTransitionManager.startTransition({
types: ['viewer'],
types: [type],
prepareOldSnapshot: () => {
activateHeroAsset(heroAssetId);
},
@@ -24,6 +25,24 @@ export function startViewerTransition(
});
}
export function startViewerTransition(
heroAssetId: string,
openViewer: () => void,
activateHeroAsset: (assetId: string) => void,
deactivateHeroAsset: () => void,
) {
startHeroTransition('viewer', heroAssetId, openViewer, activateHeroAsset, deactivateHeroAsset);
}
export function startMemoryTransition(
heroAssetId: string,
openViewer: () => void,
activateHeroAsset: (assetId: string) => void,
deactivateHeroAsset: () => void,
) {
startHeroTransition('memory-enter', heroAssetId, openViewer, activateHeroAsset, deactivateHeroAsset);
}
let activeOverlay: HTMLElement | undefined;
export function removeCrossfadeOverlay() {