basic page transitions between /blog and /blog/[slug]

routes/blog/index.html

@@ -2,31 +2,54 @@
 	<title>Blog</title>
 </svelte:head>
 
-<h1>Recent posts</h1>
+<div style="position: absolute">
+	<h1 transition:fade="{duration: 100}">Recent posts</h1>
 
-<ul>
-	{#each posts as post}
-		<!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
-		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
-	{/each}
-</ul>
+	<ul>
+		{#each posts as post}
+			<!-- we're using the non-standard `rel=prefetch` attribute to
+					tell Sapper to load the data for the page as soon as
+					the user hovers over the link or taps it, instead of
+					waiting for the 'click' event -->
+			<li out:fade={duration:100}>
+				<a
+					rel='prefetch'
+					href='blog/{post.slug}'
+					in:receive="{key: post.title}"
+					out:send="{key: post.title}"
+				>{post.title}</a>
+			</li>
+		{/each}
+	</ul>
+</div>
 
 <style>
 	ul {
 		margin: 0 0 1em 0;
 		line-height: 1.5;
 	}
+
+	a {
+		display: inline-block;
+		will-change: transform;
+	}
 </style>
 
 <script>
+	import { fade } from 'svelte-transitions';
+	import { send, receive } from './_transitions.js';
+
 	export default {
 		preload({ params, query }) {
 			return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
+		},
+
+		transitions: {
+			fade,
+			send,
+			receive
 		}
 	};
 </script>