Headless UI Transitions
Heya, I'm trying to create a simple little animation where a dropdown menu slides down when revealed (similar to an accordion), but I can't seem to get it to properly work.
At the moment it just pops into/out of view after a short delay. Is there an easy way to solve this? Or a better way to do this (without Headless UI). Thanks!
Solution:Jump to solution
I ended up switching over to Framer Motion;
```tsx
<Listbox>
{({ open }) => (
...
5 Replies
Here is a simple example
Solution
I ended up switching over to Framer Motion;
Works pretty much perfectly.
one of the biggest gotchas with HeadlessUI's transition component is that classes in the enter, enterFrom, etc aren't detected by tailwind by default
iirc The issue I had was to do with the way that the Transition component was creating a parent div (?) to animate it, which my child element wasn't liking
Might have also been to do with the max-height, but then again there were a lot of problems with that initial code lol
It does create a parent div, though you do have the option to pass
<Transition as={React.Fragment}