Working with CSSTransitionGroup in React

CSS transitions can be a little tricky in React if you need to animate a component when it leaves the DOM. I had just that problem recently with some cards that I wanted to animate when a user deletes them. To solve this problem I used the CSSTransitionGroup.

The transition group adds classes to your components when it enters and leaves the DOM. All you need to do is put your array of items within the group to get started.

<CSSTransitionGroup
  transitionName="location-cards"
  transitionAppear={true}
  transitionAppearTimeout={400}
  transitionEnterTimeout={400}
  transitionLeaveTimeout={400}
>
  {locationCards}
</CSSTransitionGroup>

The most important thing here is the transitionName. This tells React what class names to look for. You need to write all the class names out yourself as follows:

.location-cards-appear {
  opacity: 0;
}
.location-cards-appear.location-cards-appear-active {
  opacity: 1;
  transition: opacity 400ms ease-in;
}
.location-cards-enter {
  opacity: 0;
}
.location-cards-enter.location-cards-enter-active {
  opacity: 1;
  transition: opacity 400ms ease-in;
}
.location-cards-leave {
  opacity: 1;
}
.location-cards-leave.location-cards-leave-active {
  opacity: 0;
  transition: 400ms ease-in;
}

You’ll need an appear, appear active, enter, enter-active, leave, and leave-active. That’s all you need!