Transitions issues due to mountOnEnter/unmountOnExit

[Hideman85]

I'm getting a few issues with the transitions as follow:

1. Grow: Despite unmountOnExit set the components remain in dom after exit animation
   • Expect to be destroyed
2. Slide: Changing the property direction while in is false makes the component to show, goes from direction A to B and hide
   • Expect to keep the component hidden
3. Slide: Multiple slide (like tabs) with the properties mountOnEnter unmountOnExit do only mount/show the first one, as soon as removed the tabs works fine

Sample code

```js import { Component, createSignal, For } from 'solid-js'; import { Pagination, PaginationItem, Slide, Stack, styled } from '@suid/material'; const StyledPagination = styled(Pagination)(() => ({ display: 'flex', justifyContent: 'center', '> ul': { gap: '1rem', '> li > button': { padding: '0.5rem 2rem', fontSize: '1.5rem', height: 'auto', }, }, })); const General: Component = () => (

General

) const Graphics: Component = () => (

Graphics

) const Controls: Component = () => (

Controls

) const Tab: Component<{ shown: boolean, dir: 'left' | 'right', component: Component }> = (props) => { const shown = () => props.shown; const dir = () => props.dir; const Component = props.component; return ( <>

Component {Component.name} shown {`${shown()}`} dir {dir()}

) }; const tabs = [ { name: 'General', component: General, }, { name: 'Graphics', component: Graphics, }, { name: 'Controls', component: Controls, }, ]; const GameOptions: Component = () => { const [prevTab, setPrevTab] = createSignal(-1); const [nextTab, setNextTab] = createSignal(0); const setTab = (tab: number) => { setNextTab((curr) => { if (curr == tab) return curr; // Do nothing if same setPrevTab(curr); return tab }) } const dir = (tab: number) => { if (nextTab() > prevTab()) { return tab >= nextTab() ? 'left' : 'right'; } return tab > nextTab() ? 'left' : 'right'; } return ( setTab(num - 1)} count={tabs.length} siblingCount={tabs.length - 2} shape='rounded' size='large' renderItem={(item) => } />

Prev tab {prevTab()}, next tab {nextTab()}

{(tab, idx) => } ); } ```

Thanks in advance for your help