Route transitions

It's easy to add a nice transition between routes, leveraging the built-in transitions of Svelte.

For example, to make your components fade in gracefully, wrap the markup in a container (e.g. <div> or <section>) and attach a Svelte transition to it:

<script>
    import { fade } from 'svelte/transition'
</script>

<div in:fade={{ duration: 500 }}>
    <h2>Component's code goes here</h2>
</div>

When you apply the transition to multiple components, you get a smooth transition effect as the router swaps them.

For more details, see the official Svelte documentation on transitions.