CSS api doesn't support dynamic styles

[minht11]

CSS api does not support dynamic styles. Styles are always the same as they there when component was declared.

  const [enabled, setEnabled] = createSignal(false)
  const [backgroundBlue, setBackgroundBlue] = createSignal(false)

  // No matter 'backgroundBlue' value class will always be red
  const enterActive = () => (backgroundBlue() ? 'blue-enter' : 'red-enter')
  const exitActive = () => (backgroundBlue() ? 'blue-exit' : 'red-exit')

  return (
    <Transition
      enter={cssEnter({ active: enterActive() })}
      exit={cssExit({ active: exitActive() })}
    >
      <Show when={enabled()} fallback={<div>Disabled</div>}>
        <div>Enabled</div>
      </Show>
    </Transition>
  )

Reproduction

[otonashixav]

I have a fix, but it won't update styling in the middle of a transition, and don't plan to have support for that built in.

[otonashixav]

Seems like the fix in 0.5.6 has some unintended side effects; calling the helpers inline i.e. enter={cssEnter(... will cause them to be called again whenever the children change, breaking the default behaviour of the enter helpers (skip initial animation). I've reverted the fix with 0.5.7 for now. Seems like the best way forwards is to support passing getters into the helpers.

[otonashixav]

Fixed in 0.6.0. Does not support updating styling in the middle of a transition.