[Accordion] How to make animated accordion responsive ?

[oggnimodd]

Hi guys!

I am following the docs to create an animated accordion. The animation works, but when resizing the window, the opened AccordionContent seems to have a fixed height, and is not responsive. AccordionContent will readjust its height only when accordion is reopened again

screen-capture.mp4

here's the sandbox

[andy-hook]

Hi @dominggo1999 , this appears to be caused by the use of animation-fill-mode: forwards which persists the height post animation. We started recommending this as a way to resolve flicker in React 18, though since you’ve brought this is our attention I’m wondering if it remains the best solution.



In the meantime a simple workaround could be to remove forwards from the open animation as that direction doesn't appear to particularly suffer from the issue.





https://codesandbox.io/s/tender-bash-fflezd

[oggnimodd]

@andy-hook yeah, using animation-fill-mode: forwards feels like a hack, but it gets the work done for now. Thank you for answering