search

solidjs-community / solid-transition-group

SolidJS components for applying animations when children elements enter or leave the DOM.
https://solid-transition-group.netlify.app
MIT License
254 stars 14 forks source link

Using @solidjs/router lazy components with mode="outin" #27

Closed SoundOfTheSky closed 1 year ago

SoundOfTheSky commented 1 year ago

Then I try to add transition mode="outin" to lazy-loaded components in @solidjs/router I get an error.

Outlet:

<Transition mode="outin">
  <Outlet />
</Transition>

Lazy-loaded components:

lazy(async () => import('./example/path'));

Error then trying to navigate:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')
    at enterTransition (solid-transition-group.js:41:10)
    at endTransition (solid-transition-group.js:100:37)
    at solid-transition-group.js:85:34
thetarnav commented 1 year ago

I'm pretty sure that version 0.1.0 fixes that issue. Here you can see a demo that uses <Outlet/> wrapped with <Transition mode="outin"> and it is able to animate routes just fine, but when I downgrade the version to 0.0.13 I can see some errors in the console and bugs with the transition. https://stackblitz.com/edit/solid-transition-group-outin-router-outlet