add page transition

tjheffner · Nov 11, 2022 · e9fd6d2 · e9fd6d2
1 parent bd46e4d
commit e9fd6d2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+  const currentRoute = url.pathname
+
+  return {
+    currentRoute
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -8,9 +8,13 @@
 	import { onMount } from 'svelte';
 	import { MY_TWITTER_HANDLE, GH_USER, SITE_TITLE } from '$lib/siteConfig';
 
+	import { fade } from 'svelte/transition'
+
 	let showBackToTop = true;
 	let showGetInTouch = false;
 
+	export let data
+
 	onMount(async () => {
 		if ($page.url.pathname === '/') showBackToTop = !showBackToTop;
 		if ($page.url.pathname === '/about') showGetInTouch = !showGetInTouch;
@@ -30,7 +34,10 @@
 	<Header />
 </div>
 <!-- for skip link -->
+
+{#key data.currentRoute}
 <main
+	in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}
 	id="maincontent"
 	class="flex flex-col justify-center bg-orange-100 px-4 dark:bg-slate-900 sm:px-8"
 >
@@ -41,6 +48,7 @@
 {/if}
 
 </main>
+
 <footer class="flex flex-col justify-center bg-orange-100 px-4 py-12 dark:bg-slate-900 sm:px-8">
 	{#if showGetInTouch}
 		<br> <!-- force slice top-border -->
@@ -104,3 +112,4 @@
 		</div>
 	</div>
 </footer>
+{/key}