score:4

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

Related Query

More Query from same tag