React Animation: The animation is a technique in which images are manipulated to appear as moving images. It is one of the most used technique to make an interactive web application. In React, we can add animation react js using an explicit group of components known as the React Transition Group.
React Transition Group is an add-on component for managing component states and useful for defining entering and exiting transitions. It is not able to animate styles by itself. Instead, it exposes transition states, manages classes and group elements, and manipulates the DOM in useful ways. It makes the implementation of visual transitions much easier.
React Transition group has mainly two APIs to create transitions.
These are:
1) React Transition Group:
It uses as a low-level API for animation.
2) ReactCSSTransitionGroup:
It uses as a high-level API for implementing basic CSS transitions and animations.
Installation:
We need to install react-transition-group for creating animation in React Web application. You can use the below command.
React Transition Group Components
React Transition Group API provides three main components.
These are:
1)Transition
2)CSSTransition
3)Transition Group
Transition:
It has a simple component API to describe a transition from one component state to another over time. It is mainly used to animate the mounting and unmounting of a component. It can also be used for in-place transition states as well.
We can access the Transition component into four states:
1)entering
2)entered
3)exiting
4)exited
CSSTransition:
The CSSTransition component uses CSS stylesheet classes to write the transition and create animations. It is inspired by the ng-animate library. It can also inherit all the props of the transition component. We can divide the “CSSTransition” into three states.
These are:
Appear
Enter
Exit
CSSTransition component must be applied in a pair of class names to the child components. The first class is in the form of name-stage and the second class is in the name-stage-active. For example, you provide the name fade, and when it applies to the ‘enter’ stage, the two classes will be fade-enter and fade-enter-active. It may also take a prop as Timeout which defines the maximum time to animate.
TransitionGroup:
This component is used to manage a set of transition components (Transition and CSSTransition) in a list. It is a state machine that controls the mounting and unmounting of components over time. The Transition component does not define any animation directly. Here, how ‘list’ item animates is based on the individual transition component. It means, the “TransitionGroup” component can have different animation within a component.
Let us see the example below, which clearly help to understand the React JS Animation.
Example
App.js
In the App.js file, import react-transition-group component, and create the CSSTransition component that uses as a wrapper of the component you want to animate. We are going to use transitionEnterTimeout and transitionLeaveTimeout for CSS Transition. The Enter and Leave animations used when we want to insert or delete elements from the list.
