sapper-template/routes/blog/index.html

<svelte:head>
	<title>Blog</title>
</svelte:head>

<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 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>