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

Margin on content of accordion causes small jump at the end of animation #128

Closed Hahlh closed 2 years ago

Hahlh commented 2 years ago

Good day! Thanks for the awesome package.

Additional margin on the children of <AnimateHeight> seems to cause a noticable 'jump' at the end of the animation.

I created a video for you here as this should be the easiest and most effective way of showing the behavior:

https://user-images.githubusercontent.com/45669613/170217312-1885109e-ca61-4524-b7c6-ac9731f7eda4.mp4

Being able to keep using margin in those place would be important for basic text styling.

I will test whether the behavior also occurs after building (Gatsby & Tailwind are used).

Interestingly padding doesn't seem to trigger the issue.

Do you need any other information?

Stanko commented 2 years ago

Hey @Hahlh, Thanks for the detailed description. Unfortunately, due to margins collapsing it is not possible to use margins in this scenario. But you can switch to padding and the issue won't happen. Hope that helps. Cheers!

Hahlh commented 2 years ago

Okay great! That should likely be mentioned in the readme.

Thank you for the fast answer @Stanko ! :slightly_smiling_face:

Stanko commented 2 years ago

You are right, I'm going to add a paragraph in "Gotchas", thanks!