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

This commit is contained in:
2026-02-18 10:07:38 +01:00
parent 207efcc38e
commit 9177164ddf
2 changed files with 8 additions and 2 deletions

View File

@@ -11,6 +11,7 @@ onNavigate((navigation) => {
const toRecipe = navigation.to?.params?.name;
const fromRecipe = navigation.from?.params?.name;
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
const title = document.querySelector('[style*="view-transition-name: recipe-title"]');
@@ -24,7 +25,7 @@ onNavigate((navigation) => {
resolve();
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) {
const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;

View File

@@ -352,6 +352,7 @@
src="https://bocken.org/static/rezepte/full/{heroImg}"
alt=""
loading="eager"
data-recipe={heroRecipe.short_name}
/>
<div class="hero-overlay"></div>
</figure>
@@ -360,7 +361,11 @@
<div class="hero-text">
<h1>{labels.title}</h1>
<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>
<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>