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

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;
}