While React manages different components and their behavior to make any web app interactive it contains no methodology of adding aesthetics to the app itself. An animation is considered to be one of the most used methods to add aesthetics to an app, we can add animation to a React App using an explicit group of components known as the React Transition Group.
The developers of the Transition Group define it as,
A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.
Before moving on to implement the Transition Group we must take some key points into consideration as follows.
Important Points to Note
- React was meant to be used to create web apps and the developers thought it would be best to separate the other additional features such as animations to keep react light weighted. Thus in order to use the Transition Group, we will need to install it separately, which we will cover later in this article.
- React Transition group consists of three primary components Transition, CSSTransition and TransitionGroup we will give a brief look into each of them later in this article and will implement the CSSTransition component due to its popularity.
- React Transition Group consists only of components i.e. in order to implement animation to any set of components or HTML elements we must firstly wrap them within any of the three existing components.
Components of React Transition Group
As we discussed earlier, React Transition group consists of three primary components Transition, CSSTransition and TransitionGroup. Let us now describe the following in brief.
- Transition: The Transition component has a simple API that lets the developer describe a transition from one component state to another over time. Primarily it is used to animate the mounting and unmounting of a component, but can also be used to create more complex animations.
According to the Transition Component, a Transition can be divided into Four Main Stages:
More on the Transition Component will be discussed in future articles.
- CSSTransition: As the name suggests this transition component relies on CSS transitions and animations. It’s inspired by the ng-animate library. According to the CSSTransition Component, a transition can be divided into Three Main Stages:
During all the three stages of transition the CSSTransition component applies a pair of class names to the child components. The first class applied is of the form name-stage and the second class is of the form name-stage-active for example if the name provided was fade and if it was applied on the enter stage the two classes applied will be fade-enter and fade-enter-active.
All that is left for the developer is to apply proper CSS transitions to these classes. CSSTransition component also takes a prop as Timeout which defines the maximum time to animate.
More on the CSSTransition Component will be discussed in future articles.
- TransitionGroup: The TransitionGroup component is used to manage a set of Transition components in a list. Similarly to the Transition component itself, the TransitionGroup doesn’t directly set up the animations it is a state machine as it keeps track of the current state the component is in i.e. mounting or unmounting.
The TransitionGroup component is used primarily to have different animations within a component, this can be accomplished by wrapping several Transition components within a TransitionGroup component. A TransitionGroup may contain any of the available components. More on the TransitionGroup Component will be discussed in future articles.
Now that we have learned what React Transition Group is and what are its components. We should take each of the components and see them in details along with a few examples. Finally, we will be creating a very simple app to summarize what we learned.