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 🌈•6mo ago

mb because index never gets to be 3? https://playground.solidjs.com/anonymous/9389553a-ce11-4ef4-b652-2f5c9821dace

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

bigmistqke 🌈•6mo ago

not familiar with that onClick={[setIndex, index() + 1]} syntax, but onClick={[setIndex, () => index() + 1]} works

Gaming

Programming

Help with Transitions (solid-transition-group)