search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.08k stars 259 forks source link

Feature (?): Animate when element changes size #232

Closed mrlubos closed 4 years ago

mrlubos commented 6 years ago

Hello,

I wonder if this is something that is already supported or could be supported in the future as it falls neatly within the "performant animations" spirit. Say we have a list of to-do items and we can click on each item to expand it and show more details. We would do that by changing its height attribute and rendering new children with more details.

Now, we already use react-flip-move but at the moment, all elements below this expanded item would just jump by the newHeight - oldHeight amount. This is because react-flip-move cares only about the items order or number of items and neither of these has changed. Would it be possible to plug into the default behaviour to make react-flip-move animate all items below with translateY(${newHeight - oldHeight})? (this is only an example, in practice these items could be stacked horizontally into multiple rows)

Thanks!

joshwcomeau commented 6 years ago

Hey @lmenus,

So, unfortunately, I don't think myself or any of our collaborators have the time/energy right now to work on new features. It also seems like a pretty tricky thing to add, since react-flip-move currently doesn't track the heights of any of its children.

Sorry about that!

mrlubos commented 6 years ago

Hi @joshwcomeau, no worries, completely understandable! I’ll leave this open if anyone wants to pick up on it, or feel free to close. Thanks!

tobilen commented 4 years ago

doesn't seem like this is happening.