Open rchrdnsh opened 4 years ago
this? https://stackoverflow.com/questions/57464113/how-to-do-page-transitions-with-svelte-sapper
there's also an open issue here https://github.com/sveltejs/sapper/issues/295
note to self, nestedtransitions
dont exist in v3 anymore
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?
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
hmmmm...never done something like that before. Not really sure where I would start, to be honest 🤔
This article might be of some help: https://dev.to/buhrmi/svelte-component-transitions-5ie.
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:...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! 🤗