search

Stanko / react-animate-height

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height.
https://muffinman.io/react-animate-height
MIT License
756 stars 53 forks source link

Prevent content jumps when one container opens and the other closes #147

Closed krivoruchkoND closed 1 year ago

krivoruchkoND commented 1 year ago

Code example

https://codesandbox.io/s/react-animate-height-v3-basic-example-forked-7tkkmp?file=/src/index.js

Expected behavior

Pls, check codesandbox.
I what to build accordion-like component with same height items. But sibling component jumps, when accordion items open and collapse

Your Environment

Stanko commented 1 year ago

Hey @krivoruchkoND, This wasn't a planned usecase for AnimateHeight, but we can hack our way around it.

There is a short timeout (50ms) here: https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx#L283-L290

You can mitigate that by adding:

delay={isOpen ? 50 : 0}

I updated the sandbox: https://codesandbox.io/s/react-animate-height-v3-basic-example-forked-m4x4d9?file=%2Fsrc%2Findex.js

I'm aware that is not perfect, but it is the closest you can get with this library. Solving this properly in the library would mean I have to change the way it works, which I don't want to do at this point.

You can also try using a hack with CSS grid to animate height: https://codepen.io/stanko/pen/abQGQyM

But in that scenario, be sure to handle accessibility (hiding the content) yourself.

Hope this helps, cheers!

krivoruchkoND commented 1 year ago

Thank you!
I'll try to use grid hack