React TutorialLesson 42Free preview

React Transitions

This lesson is part of React · All levels

Summary

React Transition Group helps add inbound, outbound, and moving animations to the React element. The CSSTransition component adds a CSS class according to the enter or exit status, and then activates it following the specified timeout. Separating the animation logic from the components makes the transition easier to control.

Key points

We need to install a reaction-transition-group package.
CSSTransition uses props in and timeout
Standard animation classes: -enter, -enter-active, -exit, -exit-active
TransitionGroup is used to animate a list of elements

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.