CodesJava

Easy learning with example program codes

Animation in ReactJS

React Animation
The animation is a technique to make an interactive web application. To add animation in ReactJS an explicit group of components is used. These explicit group of components are also known as the React Transition Group, which is technically an add-on component.

 
Uses of React Transition Group:

  • Managing component states.
  • Defining entering and exciting transitions.
  • Exposing transition states.
  • Managing classes and group elements,
  • Manipulating the DOM in useful ways.
  • Makes easier implementation of visual transitions.

 

React Transition group APIs to create transitions:

ReactTransitionGroup:

Low-level API for animation.

 

ReactCSSTransitionGroup:

High-level API for implementing basic CSS transitions and animations.

Installation of React Transition group:

Command: $npm install react-transition-group --save

React Transition Group Components:
There are three main components of React Transition Group.

Transition:
To describe a transition from one component state to another over time, it has a simple component API and is thus used to animate the mounting and unmounting of a component. Entering, Entered, Exiting and Exited are the four states in which a user can access the Transition component, thus this component is suitable for in-place transition states as well.

CSSTransition:
To write the transition and create animations, it uses CSS stylesheet classes. Inspired by the ng-animate library, it can be divided into three states, namely, Appear, Enter and Exit. The CSSTransition component is also suitable to be used for inheriting all the props of the transition component.

TransitionGroup:
To manage a set of transition components in a list, the TransitionGroup component is used. Being a state machine, it can control the mounting and unmounting of components over time. The “TransitionGroup” component can have different animation within a component, since it animates the list item on the basis of individual transition component, along with the fact that it does not define any animation directly.

Example:
App.js:

import React, { Component } from 'react';  
import { CSSTransitionGroup } from 'react-transition-group';  
class App extends React.Component {  
constructor(props) {  
super(props);  
this.state = {items: ['Happy', 'Joy', 'Smiling', 'Juvenile']};  
this.handleAdd = this.handleAdd.bind(this);  
}    
handleAdd() {  
const newItems = this.state.items.concat([  
prompt('Enter Name')  
]);  
this.setState({items: newItems});  
}   
handleRemove(i) {  
let newItems = this.state.items.slice();  
newItems.splice(i, 1);  
this.setState({items: newItems});  
}   
render() {  
const items = this.state.items.map((item, i) => (  
<div key={item} onClick={() => this.handleRemove(i)}>  
{item}  
</div>  
));  
return (  
<div>  
<h1>Wait for the Magic!!</h1>  
<button onClick={this.handleAdd}>Insert</button>  
<CSSTransitionGroup  
transitionName="magic"  
transitionEnterTimeout={600}  
transitionLeaveTimeout={500}>  
{items}  
</CSSTransitionGroup>  
</div>  
);  
}  
}  
export default App;

Main.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
ReactDOM.render(<App />, document.getElementById('app'));

Style.css:

.magic-enter {  
opacity: 0.02;  
}   
.magic-enter.example-enter-active {  
opacity: 2;  
transition: opacity 550ms ease-in;  
}  
.magic-leave {  
opacity: 2;  
}  
.magic-leave.example-leave-active {  
opacity: 0.02;  
transition: opacity 250ms ease-in;  
}

Output:

Explanation:
Here, a new item can be added in the list by clicking the button. The insertion will be done in fade in style. The deletion is possible by clicking on the particular link. We have also specified the animation durations in both the CSS and render method.

Please follow and like us:
error









Copyright © 2019 CodesJava DMCA.com Protection Status