Also transition headings

Author: geoffrich

src/lib/ListItem.svelte

@@ -8,6 +8,12 @@
 <li class="p-3 hover:bg-slate-100 hover:text-slate-900">
 	<a {href} class="block flex items-center">
 		<Icon src={item.image} name={item.name} className="shared-element" />
-		<div class="text-xl">{item.name}</div>
+		<div class="text-xl shared-element" style:--transition-tag="h-{item.name}">{item.name}</div>
 	</a>
 </li>
+
+<style>
+	div {
+		page-transition-tag: var(--transition-tag);
+	}
+</style>

src/routes/fruits/[name].svelte

@@ -5,9 +5,13 @@
 	export let nutrition;
 
 	import Nutrition from '$lib/Nutrition.svelte';
-	import { prepareTransitionToPage } from '$lib/utils/use-page-transition';
+	import {
+		prepareTransitionToPage,
+		prepareTransitionFromPage
+	} from '$lib/utils/use-page-transition';
 
 	prepareTransitionToPage();
+	prepareTransitionFromPage();
 </script>
 
 <div class={'flex flex-col items-center justify-center py-4 px-4 sm:flex-row'}>
@@ -21,7 +25,7 @@
 			alt={`picture of ${name}`}
 			style:--transition-tag={name}
 		/>
-		<h1 class="text-4xl font-bold mt-4">{name}</h1>
+		<h1 class="text-4xl font-bold mt-4 shared-element" style:--transition-tag="h-{name}">{name}</h1>
 	</div>
 
 	<div class="sm:w-2/4 w-full">
@@ -33,4 +37,8 @@
 	img {
 		page-transition-tag: var(--transition-tag);
 	}
+
+	h1 {
+		page-transition-tag: var(--transition-tag);
+	}
 </style>

src/routes/fruits/index.svelte

@@ -2,9 +2,13 @@
 	export let items;
 
 	import ListItem from '$lib/ListItem.svelte';
-	import { prepareTransitionFromPage } from '$lib/utils/use-page-transition';
+	import {
+		prepareTransitionFromPage,
+		prepareTransitionToPage
+	} from '$lib/utils/use-page-transition';
 
 	prepareTransitionFromPage();
+	prepareTransitionToPage();
 </script>
 
 <div class={'flex-col items-center justify-center py-4 px-4'}>