SvelteKit Page Transition

<script lang="ts">
  import { cubicOut } from 'svelte/easing'
  import { fade,fly } from 'svelte/transition'
  
  import { page } from '$app/stores'
</script>

{#key $page.url.pathname}
  <div in:fade={{ duration: 200, easing: cubicOut }}>
    <div in:fly={{ x: 20, duration: 420, easing: cubicOut }}>
      <slot />
    </div>
  </div>
{/key}