Router transition animations

[beckend]

Specific Demand

Router transition animation between change of routes, would be beneficial to have async functions able to execute between events of router changes

[TeFiLeDo]

I don't know much about animation, could you explain a little bit? Do you want the router to invoke a callback whenever the active route changes?

[beckend]

It's easier if you see it: https://codesandbox.io/s/lqc45

[TeFiLeDo]

So let me see if I understand this correctly:

1. When giving the Routes component a location prop, it doesn't check what the current URL actually is, instead using the passed location.
2. When the key prop of the CSSTransition component changes, it is rendered twice, once with the location it had before, and once with the location it has afterwards.

If that is correct, what you are asking for is a way to tell the router what the current location is, but only for part of the app. The rest has nothing to do with the router itself.

Assuming my understanding is right, that seems pretty doable. If #637 is merged, I already have an idea for an implementation.

[wackazong]

I did something in this direction but it only works with opacity transition for now. For a swipe transition, I would need to do the following:

• create a target div and set transform: translate in CSS for the source and the target div
• in the next render loop, change the transform value and let CSS animate
• after the animation ended, remove the source div and make the target div the main div

Any idea on how this could be approached? The challenge for me at the moment is that I would need a hook to be executed when the animation is finished, in order to execute step 3.