DIY Transitions: Entry & Exit in React

React recommends libraries for transitions, but those didn’t work with the library I was already using. I decided to implement my own transitions for adding and deleting elements — and it was really easy!

ATTENTION: React recommends using their libraries for transitions, like react-transition-group.

That’s gonna be a… fascinatin’ transition

To implement transitions when elements are added or deleted, follow these three easy steps.

1. Add className to state — sorry, it must be a component class, not a functional stateless component
2. setTimeout()
3. Create the CSS and tie it all together

Add className to State

I always take very small steps make sure the code keeps working. Inside the file for the component we’re working on, let’s add another line to our state (or create the state, if we haven’t). It will hold our className. We should always use meaningful names. My component creates “choice” elements, so I have…