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,
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
The animation that we can implement using the React Transition Group is pure CSS Transitions,
i.e. it doesn’t use any property of JavaScript to animate the
components. The animations are accomplished by defining classes with
varying CSS styles and equipping and unequipping the classes at
specified points in the lifecycle of the component.- 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.
- Finally, let us understand how the Transition Group works. React Transition Group components divide the lifecycle of any other child component into specific stages and developers can choose to add specific classes in these stages for a timespan known as Timeout. This is where the use of JavaScript ends. Now all is left for the developer to give different styles to the classes and add CSS Transitions for animation.
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:- entering
- entered
- exiting
- exited
- 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:
- appear
- enter
- exit
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.
References
