Provide a way to hook on routing start/end

[fogzot]

When using, for example solid-transition-group to implement enter/exit transitions on route changes, e.g.,

...
    <Transition {transitionProps}>
        <Routes />
    </Transition>
...

it is useful to use a different set of transitionProps for the enter and the exit animations. The exact set of props can be determined by comparing the old route to the new one (for example, going from master to detail usually involves an enter transition, while going back an exit one) and currently there is no way to do that. For example useLocation() and other hooks trigger after the routing transaction has ended: to late to change in any way the props passed to <Transition> or to inlfuence the DOM changes or CSS animations.

I think that implementing an hook that triggers at the start of the routing transaction would be extremely useful to help synchronize DOM animations with route changes.

[njarraud]

It would be quite useful. It is possible to get a "routeChangeComplete" event by listening to the location change. But I didn't manage to find a trick to get some sort of "routeChangeStart" event. isRouting changing from false to true only does the trick the first time the destination page is loaded. If user comes back to the page later it always remain on false.

[sonovice]

That is actually what keeps me from going down the solid route (pun intended) - I need to animate page transitions in a mobile app and be able to make "forward" and "backward" animations (slide right vs left).

[Reverier-Xu]

Any progress on this issue?

[iamcsharper]

That is actually what keeps me from going down the solid route (pun intended) - I need to animate page transitions in a mobile app and be able to make "forward" and "backward" animations (slide right vs left).

any workaround found sir?

[sonovice]

That is actually what keeps me from going down the solid route (pun intended) - I need to animate page transitions in a mobile app and be able to make "forward" and "backward" animations (slide right vs left).

any workaround found sir?

Yes - ditch solid-router and render all pages at the same time but only show the current one. Then its a question of CSS transitions.

[fogzot]

Yes - ditch solid-router and render all pages at the same time but only show the current one. Then its a question of CSS transitions.

That's not a workaround, that's a recipe for disaster. Basically it means you have to write and maintain your own routing logic, including URL parsing for parameters, data loading and all the other stuff that the router is supposed to do.

[sonovice]

That's not a workaround, that's a recipe for disaster. Basically it means you have to write and maintain your own routing logic, including URL parsing for parameters, data loading and all the other stuff that the router is supposed to do.

Indeed, it's a lot of work with many pitfalls for a seemingly simple feature. Worked out in my case, though. Since it was a mobile app, my data was available locally already. That made it slightly easier/faster to implement data loading etc.