react-flip-move: Enter/Exit animations

A few people have asked about Enter/Exit animations.

I think it’s possible to keep in line with the FLIP methodology. Here’s how I envision exit animations working:

• When the component receives new props, we check to see if any items are about to be removed
• We instead keep those elements, but apply an immediate style (something like transform: scale(0, 0);). The idea is to make the element take up 0px worth of space, so that when the layout is recalculated, its siblings treat it as though it wasn’t there.
• We then do the FLIP animation. There’s some flexibility here, we can have presets for how removed items should be transitioned. They can fade out and shrink, or even just constrict in one axis (a vertical list could have removed items flattened!). I’m excited by this; it allows for a lot of possible customization.
• Once the animation is complete, we remove those nodes from the DOM by re-rendering directly from the props provided.

The same process could work for Enter animations. We’d start it at transform: scale(0,0);, and expand it to its normal size while other elements shift out of the way.

This is a non-trivial change to the source code. We’d need to find a way to “hold on” to the items that are being removed. There may be unforeseen complications.

I’ll try and dedicate some time in the next month to test this idea out. If anyone wants to give this implementation a shot, I’d be delighted 😃 Let me know if anyone has any questions.

CC @aight8