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) => (
this.handleRemove(i)}>
{item}
));
return (
Wait for the Magic!!
{items}
);
}
}
export default App;
Main.js:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(, 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:
