solid-router
solid-router copied to clipboard
solidjs
[FEATURE REQUEST] Shared element transitions support
This is likely out of the scope for the time being, especially since the feature is still locked behind the chrome://flags/#document-transition flag in chrome canary.
Some resources on the incoming API in question:
- https://github.com/WICG/shared-element-transitions
- https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md
- https://www.youtube.com/watch?v=JCJUPJ_zDQ4
The transitions function by rendering the soon to be page as a separate DOM structure (kinda similar to solid's Portal) then taking a screenshot of both the previous element and the new element. These screenshots get animated in some form before the new page's contents become interactable again.
It would be really cool to see this feature power solid SPAs as soon as browsers begin to support it.
High level, this could look like:
const App = () => {
return (
<div style={{width: "100vw", height: "100vh"}}>
<NavBar />
<Routes>
<Route path="/" element={<Dashboard/>} />
<Route path="/content/:id" element={<Content/>} transition={true} />
</Routes>
</div>
);
};
it's assumed the user has configured any required css to customize the transition.
Yeah definitely into this. Need to think about how it plays with Suspense Transitions but my gut is it happens right at switch time. So while we are loading stuff in the background during Suspense Transition we don't do the browser version yet. When Suspense finishes we use the browser API at that point to smooth it in.
I guess I will need to study it up more, but is a boolean really sufficient? If so I'd be inclined to default it. I assumed there is more configuration needed.
Really want to be able to use this too but I don't think this belongs in the router, i think this should be a core SolidJS feature because this is very useful for many dom updates outside of routing
