How to do page transitions with svelte/sapper

I want to realize a simple page (route) transition in Sapper. Something that is easily achievable with Nuxt for example. Does anyone have an idea how to realize that with Sapper?

I already wrapped my page content into a div with a transition:fade directive. This works. Yet, the two pages transition at the same time, meaning while one page transitions out the other one already transitions in. It would be great if someone pointed me in the right direction. Thanks!

Let me just start of by saying I don't know if this is the most effective way to do it. This is the way I solved it and it works great for me.

I first made my own custom variation of the 'fade' transition and put it in 'components/pageFade.js'

import { sineOut } from "svelte/easing";

let duration = 250;
let delay = duration;

let delayZero = 0;

export const fadeIn = _ => ({
  duration,
  delay,
  easing: sineOut,
  css: t => `opacity: ${t}`
});
export const fadeOut = _ => ({
  duration,
  delay: delayZero,
  easing: sineOut,
  css: t => `opacity: ${t}`
});

1. The delayZero variable is there because for some reason it won't take '0' directly and will break.
2. The duration variable is the length of the fade in milliseconds

Then for all files I wanted to have this transition on I did the following:

<script>
  import { fadeIn, fadeOut } from "../components/pageFade";

  // All your other JS goes here
</script>

<style>
  /* Styles go here */
</style>

<main in:fadeIn out:fadeOut>
  <!-- All the normal HTML goes here -->
</main>

I would then use that as a template on almost every single one of the pages, which seems like a lot but it's not too bad.

Hope it helps and let me know if you have any other questions!

Max