Support enter/exit transitions

[DustinJSilk]

Is your feature request related to a problem?

Qwik doesn't have any first class support for transitioning elements when they are created or destroyed.
Animating a component into view, or between states, can be done using an eager useClientEffect$.

The difficulty is when an element is destroyed; it's not possible to keep the element in the DOM until the animation is complete.

Describe the solution you'd like

SolidJS allow CSS animations with a Transition element:

<Transition name="slide-fade">
  {show() && (
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
      facilisis enim libero, at lacinia diam fermentum id. Pellentesque
      habitant morbi tristique senectus et netus.
    </div>
  )}
</Transition>

Svelte has a nice API using html attributes:

{#if visible}
  <p transition:fly="{{ y: 200, duration: 2000 }}">
    Flies in and out
  </p>
{/if}

Describe alternatives you've considered

To animate out an element:

• I've tried returning an async function from a useWatch and useClientEffect but the element will still be destroyed immediately.
• I was also unable to duplicate the element to inject it back into the dom and manually destory it after the animation completes. But even if I could get this working, an issue would occur when you could have multiple copies of the element if it were to toggle fast enough.

Additional context

No response

[GrandSchtroumpf]

This is not specific to qwik but in Chromium based browser you can use the view transition API to achieve that :
https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

[mhevery]

Related #3664 and https://github.com/BuilderIO/qwik/issues/5032

[wmertens]

I'd like to merge this into QwikDev/qwik-evolution#55 since we're leaning towards only using the view transitions API, and that's what Qwik UI is using too.