search

nkbt / react-collapse

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
MIT License
1.12k stars 113 forks source link

Nested collapsible shows animation. Help needed #304

Open manudas opened 3 years ago

manudas commented 3 years ago

Good afternoon! I'm working on an app with this library and nesting two collapsible. I have set them both to be open from the beginning. However, even though it shouldn't be animated, It's showing some expanding animation.

It's version 4 (in package.json) and I cannot update it to a newer version (it doesn't depend on me), so I guess I should be using hasNestedCollapse, haven't I?

Whatever way I use, it shows the animation and I can't do anything. Any advice?

nkbt commented 3 years ago

No need for extra prop. Animation happens because initial hight of the element on page load does not match resulting hight. Most likely because some content gets injected on load (after initial rendering) Sorry this is super handwavy, but without some codepen it is impossible to guess better

nkbt commented 3 years ago

It was hard to do on my phone but here is a demo with nested preopened collapse elements

https://codepen.io/nkbt/pen/xxdyyKZ

No animation there

manudas commented 3 years ago

I edited my comment as I had a mixup with the version. I said it was react-dom version 16 but I meant react-collapsed version 4. I can't really tell you how thanked I am for your big effort writing that example. We weren't able to fix it yet but we are looking at it. Could be related with the fact that some of the collapsible are hidden (display: none), and even though they are unfolded they stay hidden until an event is fired.

nkbt commented 3 years ago

Latest react-collapse should be compatible with "react": ">=16.3.0", so if you are still on v16 you're covered. I suggest updating to v5 as it works way way more reliable.

Play with that codepen and let me know if you can reproduce your issue.

But yeah when you have display:none hight would be 0. So if you show element after initial render - it will start animating. Dynamic hight in browsers is a very tricky thing, and it takes a lot of work to make sure everything works as expected. There is no silver bullet unfortunately, so many edge cases.