Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recipes: hide image-wrap background color during view transition morph
Some checks failed
CI / update (push) Failing after 21s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-02-18 20:37:13 +01:00
parent 9177164ddf
commit 7ba0995bf8
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/routes/[recipeLang=recipeLang]/+layout.svelte
View File

@@ -21,16 +21,25 @@ onNavigate((navigation) => {
} }
return new Promise((resolve) => { return new Promise((resolve) => {
document.startViewTransition(async () => { const vt = document.startViewTransition(async () => {
resolve(); resolve();
await navigation.complete; await navigation.complete;
// Hide .image-wrap background so the color box doesn't show behind the morphing image
const wrap = document.querySelector('.image-wrap');
if (wrap) wrap.style.backgroundColor = 'transparent';
// Set view-transition-name on the matching CompactCard/hero image for reverse morph // Set view-transition-name on the matching CompactCard/hero image for reverse morph
if (fromRecipe) { if (fromRecipe) {
const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`); const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`; if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;
} }
}); });
// Restore background color once transition finishes
vt.finished.then(() => {
const wrap = document.querySelector('.image-wrap');
if (wrap) wrap.style.backgroundColor = '';
});
}); });
}); });
import UserHeader from '$lib/components/UserHeader.svelte'; import UserHeader from '$lib/components/UserHeader.svelte';