search

ItalyPaleAle / svelte-spa-router

Router for SPAs using Svelte 3
MIT License
1.54k stars 104 forks source link

Is there support for crossfade? #179

Open kryptn36 opened 3 years ago

kryptn36 commented 3 years ago

Hey :smile: Looks like crossfade isn't supported. Or am i wrong?

ItalyPaleAle commented 3 years ago

What do you mean?

kryptn36 commented 3 years ago

I mean the "crossfade" transition under Svelte Transitions to do something like this.

ItalyPaleAle commented 3 years ago

Yes it's supported

ItalyPaleAle commented 3 years ago

If you have problems with using it, feel free to open an issue!

Vanilagy commented 1 year ago

Hey! First of all, thank you for this project - I'm sorry to dig up this old issue.

However, I think crossfades indeed do not work. I set up a pathological example of a left and right text that should be moving back and forth. If I include the two components manually using an {#if} on my own boolean, the transition works fine. Heck, even if I use the {#if} on svelte-spa-router's location export, it works. But it is when I switch to using <Router> that it stops working.

My guess would be that there's some sort desync happening here, that one element disappears before the other one appears, and therefore it can't find a match. NOTE: One important thing is that the send/receive functions used by the crossfades are the same, so put them in a separate .ts file or whatever and import those. So yeah, that part's figured out and that's not the culprit.

I wish I could send you a link to a Svelte REPL demonstrating this, however, the iframes there do not allow router navigation. But this example should only take about 10 minutes to reproduce.

ItalyPaleAle commented 1 year ago

Reopened