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.

the Kimmy Schmidt “fascinating transition”
the Kimmy Schmidt “fascinating transition”
That’s gonna be a… fascinatin’ transition
  1. setTimeout()
  2. Create the CSS and tie it all together
The simple entrance and exit transitions I made with these steps

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…

“That’s too easy”

setTimeout() — Adding

Let’s start with adding an element. Inside the componentDidMount() function (create it, if you haven’t already), add a setTimeout() function, which runs after a pause. It takes two arguments — a function (without parentheses, so it won’t be called immediately), and the time to wait in milliseconds, i.e. setTimeout(function, milliseconds). I used an arrow function so that the keyword “this” (which I use later) would refer to the component instead of the function inside the component. Let’s set up something like this…

Our first step in making the setTimeout() function
This function starts the component with the className ‘addingChoice,’ and then changes it to ‘choice’
It’s only ugly for now!

setTimeout() — Deleting

Deleting is very similar to adding. Inside our delete function, we will change the className in state immediately and then go through the process of deleting the element inside the setTimeout().

A deleteChoice() method that uses a timeout
Awkward pause, no transition — just as we suspected

CSS

Again, small steps. Wherever we write our CSS, let’s start by copying the same CSS we had for our original class (inside the components in the first step) 2 more times and changing their names to match the add and/or delete names we used in our component. Now I have the classes .choice, .addingChoice, and .deletingChoice that all have the same CSS. If we run the app again, it will appear that we’ve done nothing but slow down our code, but that’s what we expected.

An accurate depiction of CSS
CSS Transitions
CSS Transitions
Ta-da!

Conclusion

You can implement your own transitions for adding and deleting components both quickly and simply without adding a library. Do you have other methods or cool entrance or exit transitions? Let me know in the comments! Thanks for reading!

Full Stack Web Developer, former English as a foreign language teacher and volleyball coach. All views and opinions are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store