Use beforeNavigate

Author: geoffrich

src/lib/ListItem.svelte

@@ -3,18 +3,10 @@
 	export let href;
 
 	import Icon from '$lib/Icon.svelte';
-	import { getPageTransitionTrigger } from '$lib/utils/use-page-transition';
-
-	const transitionNextState = getPageTransitionTrigger();
-
-	function handleClick() {
-		// TODO: this only works on click, not back/forward
-		transitionNextState();
-	}
 </script>
 
 <li class="p-3 hover:bg-slate-100 hover:text-slate-900">
-	<a {href} class="block flex items-center" on:click={handleClick}>
+	<a {href} class="block flex items-center">
 		<Icon src={item.image} name={item.name} className="shared-element" />
 		<div class="text-xl">{item.name}</div>
 	</a>

src/lib/utils/use-page-transition.js

@@ -1,4 +1,4 @@
-import { afterNavigate } from '$app/navigation';
+import { afterNavigate, beforeNavigate } from '$app/navigation';
 import { getTransitionContext } from '$lib/utils/resource-context';
 import { onDestroy } from 'svelte';
 
@@ -8,10 +8,10 @@ import { onDestroy } from 'svelte';
 // Document Object Model (DOM) modification or setting of new shared
 // elements inside the callback so that this hook returns the promise and
 // defers to the callback resolve.
-export const getPageTransitionTrigger = () => {
+export const prepareTransitionFromPage = () => {
 	const transitionStore = getTransitionContext();
 
-	return () => {
+	beforeNavigate(() => {
 		// Feature detection
 		if (!document.createDocumentTransition) {
 			return null;
@@ -23,15 +23,15 @@ export const getPageTransitionTrigger = () => {
 				transitionStore.set({ transition, resolver });
 			});
 		});
-	};
+	});
 };
 
 // Call this hook on the second page. Inside the useEffect hook, you can
 // refer to the actual DOM element and set them as shared elements with the
 // transition.setElement() method. When the resolver function is called,
 // the transition is initiated between the captured images and newly set
 // shared elements.
-export const pageTransition = () => {
+export const prepareTransitionToPage = () => {
 	const transitionStore = getTransitionContext();
 	let unsub;
 	afterNavigate(() => {

src/routes/fruits/[name].svelte

@@ -5,9 +5,9 @@
 	export let nutrition;
 
 	import Nutrition from '$lib/Nutrition.svelte';
-	import { pageTransition } from '$lib/utils/use-page-transition';
+	import { prepareTransitionToPage } from '$lib/utils/use-page-transition';
 
-	pageTransition();
+	prepareTransitionToPage();
 </script>
 
 <div class={'flex flex-col items-center justify-center py-4 px-4 sm:flex-row'}>

src/routes/fruits/index.svelte

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