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

recipes: hero image view transition, skip transitions for recipe-to-recipe
Some checks failed
CI / update (push) Failing after 20s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-02-18 10:07:38 +01:00
parent 207efcc38e
commit 9177164ddf
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ onNavigate((navigation) => {
const toRecipe = navigation.to?.params?.name; const toRecipe = navigation.to?.params?.name;
const fromRecipe = navigation.from?.params?.name; const fromRecipe = navigation.from?.params?.name;
if (!toRecipe && !fromRecipe) return; if (!toRecipe && !fromRecipe) return;
if (fromRecipe && toRecipe) return; // recipe-to-recipe: no view transition
// Measure title block position so the slide animation covers exactly the right distance // Measure title block position so the slide animation covers exactly the right distance
const title = document.querySelector('[style*="view-transition-name: recipe-title"]'); const title = document.querySelector('[style*="view-transition-name: recipe-title"]');
@@ -24,7 +25,7 @@ onNavigate((navigation) => {
resolve(); resolve();
await navigation.complete; await navigation.complete;
// Set view-transition-name on the matching CompactCard 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`;

7
src/routes/[recipeLang=recipeLang]/+page.svelte
View File

@@ -352,6 +352,7 @@
src="https://bocken.org/static/rezepte/full/{heroImg}" src="https://bocken.org/static/rezepte/full/{heroImg}"
alt="" alt=""
loading="eager" loading="eager"
data-recipe={heroRecipe.short_name}
/> />
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
</figure> </figure>
@@ -360,7 +361,11 @@
<div class="hero-text"> <div class="hero-text">
<h1>{labels.title}</h1> <h1>{labels.title}</h1>
<p class="subheading">{labels.subheading}</p> <p class="subheading">{labels.subheading}</p>
<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured"> <a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured"
onclick={() => {
const img = document.querySelector('.hero-img');
if (img) img.style.viewTransitionName = `recipe-${heroRecipe.short_name}-img`;
}}>
<span class="recipe-name"><span class="recipe-icon">{heroRecipe.icon}</span> {@html heroRecipe.name}</span> <span class="recipe-name"><span class="recipe-icon">{heroRecipe.icon}</span> {@html heroRecipe.name}</span>
<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg> <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
</a> </a>