React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?

Question

Why are there so many variations? I recorded my developer tools' elements tab and it appears only the "-enter-done" and "-exit" classes are being applied to the elements being animated.

Answer 1

The docs explain it pretty easily:

CSSTransition applies a pair of class names during the appear, enter, and exit stages of the transition. The first class is applied and then a second "active" class in order to activate the css animation. After the animation, matching done class names are applied to persist the animation state.

So appear, enter and exit are different situations when these animations are triggered.

Appear - when you want transition on component first mount (like when you refresh a page).

Enter - transition when a new element has mounted.

Exit - when element un-mounts.

The role of suffixes is to allow you set different CSS property at each step of animation.

.my-animation-enter {
  opacity: 0;
  transition: opacity 1s ease;
}

.my-animation-enter-active {
  opacity: 1;
}

.my-animation-enter-done {
  cursor: pointer;
}