search

nkbt / react-collapse

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

Performance due to layout and paint #190

Closed tvararu closed 5 years ago

tvararu commented 7 years ago

Hi! Great work on this. 👍

Have you considered using FLIP (or some other transform-based animation) instead of the CSS height tween?

The issue with animating height is that it triggers layout and paint and will perform poorly on low specced devices or pages where the frame time is already close to 16ms.

I'm not specifically asking for this, but curious if it's something that has been discussed and dropped because of the added complexity or some other factor.

nkbt commented 7 years ago

It was discussed as part of react-motion discussions. Css do not give enough control comparing to js and actually not that much more performant. Also ReactNative (which we fo not use, but I've heard some people do)...

I plan to rewrite collapse without react-motion (for different reasons) and will look at css transitions instead. Will do as much to avoid any extra dependencies. But at this point it is not a priority for me and I have no estimate

nkbt commented 5 years ago

As new react-collapse@5.0.0 is released https://github.com/nkbt/react-collapse/releases/tag/v5.0.0 this issue has been most likely already solved.

Please feel free to re-open if the issue persists