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. The 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.

You can improve the UI by using React Transition Group for that:

• In your machine node version >=6 should install
• npm must be installed on your machine.
  

You can install transition group in your project component by using the command:

npm install react-transition-group --save

You can import transition component in project component by using the command:

import { Transition } from 'react-transition-group';

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
• TransitionGroup: The TransitionGroup component is used to manage a set of Transition components in a list, Similar 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 detail along with a few examples. Finally, we will be creating a very simple app to summarize what we learned.

References:

• https://github.com/reactjs/react-transition-group
• https://reactcommunity.org/react-transition-group/