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 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. ReactTransitionGroup: 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.
1. $ npm install react-transition-group –save

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:
• entering
• entered
• exiting
• 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 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.

1. import React, { Component } from 'react'; 
2. import { CSSTransitionGroup } from 'react-transition-group'; 
3. 
4. class App extends React.Component { 
5. constructor(props) { 
6. super(props); 
7. this.state = {items: ['Blockchain', 'ReactJS', 'TypeScript', 'Tecklearn']}; 
8. this.handleAdd = this.handleAdd.bind(this); 
9. } 
10. 
11. handleAdd() { 
12. const newItems = this.state.items.concat([ 
13. prompt('Enter Item Name') 
14. ]); 
15. this.setState({items: newItems}); 
16. } 
17. 
18. handleRemove(i) { 
19. let newItems = this.state.items.slice(); 
20. newItems.splice(i, 1); 
21. this.setState({items: newItems}); 
22. } 
23. 
24. render() { 
25. const items = this.state.items.map((item, i) => ( 
26. <div key={item} onClick={() => this.handleRemove(i)}> 
27. {item} 
28. </div> 
29. )); 
30. 
31. return ( 
32. <div> 
33. <h1>Animation Example</h1> 
34. <button onClick={this.handleAdd}>Insert Item</button> 
35. <CSSTransitionGroup 
36. transitionName="example" 
37. transitionEnterTimeout={800} 
38. transitionLeaveTimeout={600}> 
39. {items} 
40. </CSSTransitionGroup> 
41. </div> 
42. ); 
43. } 
44. } 
45. export default App; 
Main.js
1. import React from 'react'; 
2. import ReactDOM from 'react-dom'; 
3. import App from './App.js'; 
4. 
5. ReactDOM.render(<App />, document.getElementById('app')); 
style.css
Add style.css file in your application, and add the following CSS styles. Now, to use this CSS file, you need to add the link of this file in your HTML file.
1. .example-enter { 
2. opacity: 0.01; 
3. } 
4. 
5. .example-enter.example-enter-active { 
6. opacity: 1; 
7. transition: opacity 500ms ease-in; 
8. } 
9. 
10. .example-leave { 
11. opacity: 1; 
12. } 
13. 
14. .example-leave.example-leave-active { 
15. opacity: 0.01; 
16. transition: opacity 300ms ease-in; 
17. }

In the above example, the animation durations are specified in both the CSS and render method. It tells React component when to remove the animation classes from the list and if it is leaving when to remove the element from the DOM.
Output
When we execute the above program, it gives the below output.

Click on ‘Insert Item‘ button, the following screen appears.

Once we insert the item and press Ok, the new item can be added in the list with fade in style. Here, we can also delete any item from the list by clicking on the particular link.

So, this brings us to the end of blog. This Tecklearn ‘React Animation’ blog helps you with commonly asked questions if you are looking out for a job in React JS and Front-End Development. If you wish to learn React JS and build a career in Front-End Development domain, then check out our interactive, React.js with Redux Training, that comes with 24*7 support to guide you throughout your learning period.

React.js with Redux Training

About the Course

Tecklearn’s React JS Training Course will help you master the fundamentals of React—an important web framework for developing user interfaces—including JSX, props, state, and events. In this course, you will learn how to build simple components & integrate them into more complex design components. After completing this training, you will be able to build the applications using React concepts such as JSX, Redux, Asynchronous Programming using Redux Saga middleware, Fetch data using GraphQL, perform Testing using Jest, successively Deploy applications using Nginx and Docker plus build Mobile applications using React Native. Accelerate your career as a React.js developer by enrolling into this React.js training.

Why Should you take React.js with Redux Training?

• The average salary for “React Developer” ranges from $100,816 per year to $110,711 per year, based on the role (Front End Developer/Full Stack Developer) – Indeed.com
• React Native Supports Cross-platform Development (iOS and Android), and it can reduce the development effort by almost 50% without compromising quality or productivity
• Currently, React JS is being used by major companies like Walmart, Netflix, and HelloSign.

What you will Learn in this Course?

Introduction to Web Development and React.js
• Fundamentals of React
• Building Blocks of Web Application Development
• Single-page and Multi-page Applications
• Different Client-side Technologies
• MVC Architecture
• Introduction to React
• Installation of React
• JSX and its use case
• DOM
• Virtual DOM and its working
• ECMAScript
• Difference between ES5 and ES6
• NPM Modules

Components, JSX & Props
• React Elements
• Render Function
• Components
• Class Component
• Thinking In Components
• What Is JSX
• JSX Expressions
• Creating Your First Component
• Functional Components

React State Management using Redux
• Need of Redux
• Redux Architecture
• Redux Action
• Redux Reducers
• Redux Store
• Principles of Redux
• Pros of Redux
• NPM Packages required to work with Redux
• More about react-redux package
React & Redux
• The React Redux Node Package
• Provider Component
• Connecting React Components with Redux Store
• Reducer Composition
• Normalization: Points to Keep in Mind When Designing a Redux Store
• Redux Middleware

React Hooks
• Caveat of JavaScript classes.
• Functional components and React hooks
• What are React hooks?
• Basic hooks
• useState() hook
• How to write useState() hook when state variable is an array of objects
• useEffect() hook
• Fetch API data using useEffect() hook
• useContext() hook
• Rules to write React hooks
• Additional hooks
• Custom hooks

Fetch Data using GraphQL
• What is GraphQL?
• Cons of Rest API
• Pros of GraphQL
• Frontend backend communication using GraphQL
• Type system
• GraphQL datatypes
• Modifiers
• Schemas
• GraphiQL tool
• Express framework
• NPM libraries to build server side of GraphQL
• Build a GraphQL API
• Apollo client
• NPM libraries to build client side of GraphQL
• How to setup Apollo client

React Application Testing and Deployment
• Define Jest
• Setup Testing environment
• Add Snapshot testing
• Integrate Test Reducers
• Create Test Components
• Push Application on Git
• Create Docker for React Application

Introduction to React Native
• What is React Native
• Use of JSX elements With React Native
• The anatomy of a React Native application
• React Native installation and setup
• Running the app on Android Simulator and Android Device
• Working with Styles and Layout
• Connecting React Native to Redux

React with Redux Projects

Got a question for us? Please mention it in the comments section and we will get back to you.

382