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>
  )
}