New components: Transition

[Miguel-A-Jara]

First of all, beautiful library. I've found my productivity incremented x10 thanks to this library and the deep integration that it has with Tailwind. I'd love to see this library become the go-to for UI components in the future :).

Now, I think that transition components level up any website even more. Maybe we could get some components that handle transitions like Material UI's?

To give some context, Material UI has 5 main transition components:

1. Collapse
   Expands from the start edge of the child element.
2. Fade
   Fades in from transparent to opaque.
3. Grow
   Expands outwards from the center of the child element, while also fading in from transparent to opaque.
4. Slide
   Slides in from the edge of the screen.
5. Zoom
   Expand outwards from the center of the child element.

---

To bring more insight into this request I think that these components could have this set of options:

• Have an in prop that allows to control when the animation should be triggered.
• As if this feature gets implemented will probably be handled by Tailwind. Could all the animations have Prefers-reduced-motion set by default? In other words, if the client prefers reduced motion, none of the transitions should work (this would make it so that developers don't have to handle this manually).
• className prop in order to pass our own transition delay, duration & easing curves.
• Slide animation relative to container, by passing the container's ref, the slide animation would only be visible inside that container unlike the normal behavior which would be to see the animating element throughout the whole screen (See more).