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

[joshwcomeau]

Just a heads-up that I’ve got a basic implementation working perfectly 😃 There were a bunch of implementation issues but I think I’ve solved most of the problems. Will spend some time this weekend figuring out what the public API ought to be, updating the docs, and adding some sort of demo.

So yeah, help no longer needed, but I’ll link to a PR soon.

[joshwcomeau]

Launched 😄 use version 2.0.2 for enter/leave animations.

Thanks everyone for your feedback. The API is much better as a result 😃

Let me know if you run into any weirdness; I did a fair bit of testing and caught half a dozen obscure bugs, but there may be more. This was a significant rewrite, which nearly doubled the amount of code involved.