ReactJS - Transition Group

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
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
    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:
    • appear
    • enter
    • exit
    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.