React-spring: Transition a switch case - odd behaviour

[MattiaVorstenbosch]

I made an oversimplified https://codesandbox.io/s/50y5kkljz4 with the odd behaviour.

Not sure wether this is just a big no no, but basically my stack returns a switch case to decide what pageType to return. My mission is to create page transitions when switching between those cases.

Odd behaviour: It appears to be rendering elements multiple times and then adjusting itself, unsuccesfully.

Been busting my head at this for a week,

are there any props i'm missing or could use to solve this problem?

I personally think it's got something to do with the keys prop.

Thanks in advance!

[drcmda]

A couple of things wrong with it:

1. If you have a transition and you need the elements on top of one another, you need to position them absolutely, or else they'll push one another aside. Transition isn't doing any magic here, it just interpolates your values and retains old transitions, but the css part is up to you.

2. selectContent would read its index directly from state instead of using the type argument. But you don't want that, transitions should be pure functions. This was causing the problem that fade-out transitions would swap to the "next" component instead of fading out the old one.

Here's your fixed box: https://codesandbox.io/embed/pkmvk5o5o0

PS. took the liberty to shorten it a little

[MattiaVorstenbosch]

Thanks for getting back so quickly! Your solution works great! Now need to implement a similar solution in my more complex stack, as for now; consider it fixed 👍

ps: Amazing animation library!