Transition not working

[kulame]

hi this is my democode
https://github.com/kulame/solid-demo/blob/master/src/Search.tsx

<Transition
        enterClass="transition ease-in-out duration-1000"
        exitToClass="opacity-100 translate-y-0"
      >
        <Show when={modalOpen()} fallback={<></>}>
   </Show>
</Transition>

Why doesn't the window still not disappear after I clicked outside ?

In addition, the animation effect of Transition never appears after I click. Is it because I am using it incorrectly?

[Matt]

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