Transition not working about solid-transition-group

[mreid21]

<Transition
  enterActiveClass="transition ease-in-out duration-1000"
  exitActiveClass="transition ease-in-out duration-1000"
  enterClass="opacity-0"
  enterToClass="opacity-1"
  exitToClass="opacity-0"
  <Show when={modalOpen()}>
	  ...
  </Show>
</Transition>

Per the documentation enter class is "CSS class applied to the entering element at the start of the enter transition, and removed the frame after. Defaults to "s-enter"/." So you really want to apply the transition properties on enterActiveClass and leaveActiveClass. The code above will transition your search component from opacity 0 to 1 on enter and leave.

• enterToClass is where you want it to end up when it transitions in.
• exitToClass is where you want it to end up when it transitions out.

Someone can correct me if I'm skipping over any important details or caveats here.
Hope this helps!

[blood1shot]

@mreid21 solution works perfectly! Here is my code that uses css module

  <Portal>
    <Transition
      enterActiveClass={styles["fade--active"]}
      exitActiveClass={styles["fade--active"]}
      enterClass={styles["opacity-0"]}
      enterToClass={styles["opacity-1"]}
      exitToClass={styles["opacity-0"]}
    >
      <Show when={props.isOpen}>
        ...
      </Show>
    </Transition>
  </Portal>