Help with Transitions (solid-transition-group)

Can someone help me debug why this is not animating?
import { createSignal, Show } from 'solid-js'
import { Transition } from 'solid-transition-group'

export default function () {
const [index, setIndex] = createSignal(1)
return (
<div>
<button onClick={[setIndex, index() + 1]}>Increment</button>
<Transition
mode='outin'
enterActiveClass='transition-opacity duration-100'
enterClass='opacity-0'
enterToClass='opacity-100'
exitActiveClass='transition-opacity duration-100'
exitClass='opacity-100'
exitToClass='opacity-0'
>
<Show when={index() % 3 !== 0}>
<div>Hello: {index()}</div>
</Show>
</Transition>
</div>
)
}
import { createSignal, Show } from 'solid-js'
import { Transition } from 'solid-transition-group'

export default function () {
const [index, setIndex] = createSignal(1)
return (
<div>
<button onClick={[setIndex, index() + 1]}>Increment</button>
<Transition
mode='outin'
enterActiveClass='transition-opacity duration-100'
enterClass='opacity-0'
enterToClass='opacity-100'
exitActiveClass='transition-opacity duration-100'
exitClass='opacity-100'
exitToClass='opacity-0'
>
<Show when={index() % 3 !== 0}>
<div>Hello: {index()}</div>
</Show>
</Transition>
</div>
)
}
2 Replies
bigmistqke
bigmistqke12mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke12mo ago
not familiar with that onClick={[setIndex, index() + 1]} syntax, but onClick={[setIndex, () => index() + 1]} works
Want results from more Discord servers?
Add your server