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”

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…

Next, I replaced the className in my component with {this.state.choiceClassName}. The code should function the same as before, but now you have a className that is easy to update.

Step one is complete.

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…

Now, if you add another element, it should console.log “timeout!” one second later. You can adjust the time if you’d like to make it more clear that the timeout is working.

Now, let’s add a new className immediately upon mounting, and change it to our current className inside the timeout. Choose names that will allow others to easily follow your code.

If we run that, it will be ugly, but it will show us that our timeout is working. We’ll make it pretty in the CSS step.

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().

This changes the className to ‘deletingChoice’ in state, and then after half a second (500 milliseconds), it deletes the element. Let’s try it out, and hopefully it removes the styling from the element and then deletes it after a short time.

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.

Now, let’s change those adding and deleting classes in our CSS file so we see them start and end. It might help to slow down animations to 3000, 5000, or 10000 milliseconds so we can really see what we’re doing with our code. Popular methods are shrinking the height or width, moving it to the side, or using transparency. We are only limited by our imagination… and our CSS skills.

Note: it’s often easier to move toward our intended goal rather than all the way there. For example, shrinking your component 50% will move toward the goal, but shrinking to 0% is indistinguishable from a regular delete and could be hard to debug.

After you’ve added the CSS for those classes, we can animate between them! Often, adding transition: 0.5s will give you your desired transition (0.5s stands for half a second). This goes in the class being transitioned to, so in our regular class (not our adding class) for the adding transition, and in our deleting class for our deleting transition. Other times, you might want or need to use keyframes. If you are unfamiliar, checkout W3schools’ keyframes tutorial here!

Lastly, play with the times to make your code feel quick, sleek, and professional. Be sure to adjust the times in your React component setTimeout() and in your CSS. They will likely be equal.

You might have to forgo some fancy transitions for the sake of usability. I don’t love my entrance animation, but it gets called when the component is dragged and dropped, so it looked stranger to have something disappear and reappear every time it changed position. On the other hand, the entrance gives the user feedback and draws their eyes to the new component, and the exit transition is exactly what I wanted!

CSS Transitions
CSS Transitions

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