Simple fade-out/fade-in route transition in sapper

[rchrdnsh]

Just spun up an instance of the the starter svelte template and I'm trying to add a simple fade-out/fade-in route transition from route to route. I did this to the _layout.svelte component:

<script>
  import Nav from '../components/Nav.svelte';

  export let segment;

  import { fade } from 'svelte/transition';
  let visible = true;
</script>

<style>
  main {
    position: relative;
    max-width: 56em;
    background-color: rgb(197, 197, 197);
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box:
  }
</style>

<Nav {segment}/>

{#if visible}
  <main>
    <slot></slot>
  </main>	
{/if}

...and it did not work, so I'm wondering what the correct approach would be to make this work. I got this idea from the svelte 3 tutorial, and I also tried wrapping only the <slot> and that did not seem to work either.

Thank you! 🤗

[swyxio]

this? https://stackoverflow.com/questions/57464113/how-to-do-page-transitions-with-svelte-sapper

there's also an open issue here #295

[swyxio]

https://v2.svelte.dev/repl?version=2.13.5&gist=38bb70fb517922b4dee010f48a1dd266

[swyxio]

https://codesandbox.io/s/qkpy6nxxnj?from-embed

[swyxio]

note to self, nestedtransitions dont exist in v3 anymore

[rchrdnsh]

hmmmm...so vue does it like this:

<main>
  <transition name="fade">
    <router-view name="app-content"></router-view>
  </transition>
</main>

...with a little bit of css to define the behavior of the fade:

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}

...and that is it. So simple and elegant and awesome and easy and lovely in general. :-)

I would hope that svelte/sapper's implementation would be about this level of simple, as that's kind of the point of svelte/sapper, no?

[swyxio]

sapper is a newer project and route transitions are less well documented. i suggest making your own transition component with the api you want and sharing with everyone. we’re all learning here. in particular check the svelte tutorial for how the fade transition works under the hood

[rchrdnsh]

hmmmm...never done something like that before. Not really sure where I would start, to be honest 🤔

[maxmilton]

This article might be of some help: https://dev.to/buhrmi/svelte-component-transitions-5ie.

[benmccann]

See also https://github.com/sveltejs/sapper/issues/814