Add customizable transition to `<Accordion>`

[tulup-conner]

Discussed in https://github.com/themesberg/flowbite-react/discussions/90

^{Originally posted by **waleedrana777** May 7, 2022} Suppose, I have an accordian, and I click on top section which opens the panel but the animation is so sudden, how can I make it slow? I figure, flowbite uses typescript under the hood and was not able to figure out how to modify it! Any suggestions?

It would be nice to make it so opening/closing items in an <Accordion> can optionally have an animation.

[multiwebinc]

What about adding customizable animations to most actions and enable sensible defaults?

• Alert opening/closing
• Accordion items opening/closing
• Dropdown opening/closing
• Checkbox checking
• Input focusing
• Modal showing/hiding
• Sidebar sub-items expanded/collapsed
• Tab switching
• Theme switching (fade all colors)

[prince272]

Why do you consider building those components from headlessui. It is powered by tailwindcss and headless too

[tulup-conner]

Why do you consider building those components from headlessui. It is powered by tailwindcss and headless too

I'm not sure what this has to do with this discussion, but it certainly could use Headless UI components. I suppose that could be useful for the React and Vue libraries but there's no Headless UI for vanilla JavaScript. I have taken cues from Headless UI's codebase extensively in the process of developing this library, e.g., Headless UI components have great built-in accessibility features.

[multiwebinc]

@tulup-conner I have a feeling @prince272 was referring more to the Headless UI Transition component, which can be used to animate several things. It is not necessary to use the other Headless UI components to use Transition.

[tulup-conner]

I like that idea. It's outside the scope of anything I've ever done personally, and if I'm being honest, not generally interesting to me, at least right now. But I would absolutely love to merge someone else's PR :D

[santyas]

@tulup-conner I have a feeling @prince272 was referring more to the Headless UI Transition component, which can be used to animate several things. It is not necessary to use the other Headless UI components to use Transition.

Have you tried add some animations with Framer or Headlessui libraryies? or is it possible to add/pass transition duration-150 ease-in-out tailwind class to the component?

CC @tulup-conner

[multiwebinc]

@santyas Actually I thought I had used the HeadlessUI transition component with this library, but it turns out I was using react-transition-group. That might be another option to look into.

As for TailwindCSS, you can look at https://tailwindcss.com/docs/transition-property.

[santyas]

@multiwebinc great! Did react-transition-group solve it for you? What about SEO using that package? is html accesible when it's hidden or invisible?

[multiwebinc]

@santyas Yes, it solved my use case. As for SEO, you decide whether or not the component is unmounted when the transition is done via unmountOnExit.

[bradley]

Do you mind explaining how using react-transition-group? Ive used it often, but aside from forking flowbite-react and editing the components to include it (e.g.; the actual modal (vs the backdrop), inside of the modal component), I cant think of a clean way this would be achieved.