Native transition animations

[StarLederer]

Normally I would open an issue for this but it seems like issues are for bugs only so I'm writing a feature request here.

The problem

I am trying to migrate a website from my own tiny router solution to solid-router which for the most part works much better but there is one problem: the lack of native animation handing is causing unwanted stacking of animations in nested routes.

Real case

The website I am trying to migrate can be found here, if you click on "Get started" you will transition from /home to /docs/usage-installation and will notice that /home fades out and /docs fades in using CSS animations. Note that only the shallowest route transitions and routes nested inside that pop-in instantly. This is the desired behavior, there is no need to fade in those routes as the parent already fades them in.

solid-rotuer in combination with solid-transition-group works very similarly but if you visit this preview deployment with solid-rotuer you will notice that unlike my own router, this solution does not prevent nested routes from transitioning, creating unwanted stacking of animations which is unnecessary and feels jelloy and distracting. I imagine this effect can become much more apparent the more routes are stacked (e.g. the example from Remix)

To make matters worse this only works like that when transitioning in which makes the UI experience inconsistent.

Minimal reproduction

I have isolated the issue in a separate repo and made animations very slow and drastic so you can observe the effect well. The repo can be found here and the build is deployed here. This example uses both routers and showcases them size by side. You can observe the effect by clicking the "get started" button and going back to "home". My router is not included as a dependency, instead I put a copy of my router in /src/lib/my-router/core as it is only 2 files. Both routers have wrapper components that mainly specify animations and are expected to be different per app.

Requested solution

Introduce the ability to configure route transitions natively in the router that are triggered by the router and do no t rely on DOM updates.

Related issues / PRs

#153 requests to pull native support for animations but after a discussion with the team the author is satisfied with just using solid-transition-group (this is where I got the idea to use it myself).
#102 requests functionality that could make this possible but for different reasons.

[StarLederer]

Turns out the desired behavior I describe is actually the default behavior already, something just misaligned in my mind and made me use appear={true} so the animations were not really stacking, it was just the new dom appearing. This makes my case closed but I wonder if anyone might still need the opposite (stack animations) and whether that should be supported, because they can use appear to animate in, but it is not possible to animate nested routes out