Animation in React.js

React.js is a JavaScript library for building UI orUI components. These components are reusable UI. There are lots of developers using React for building their applications. As we all know animation is a technique that uses images to appear as movable images. Animation is an attractive feature in UI designing. Doing animation in React.js applications is not a big deal. There are many helpful components and prebuilt animation keyframes in React. React Transition Group is an explicit group of components in React for adding animation. Visual transitions are much easier to implement with React Transition Group. It has two APIs.

ReactTransitionGroup which uses animation as a low level API and ReactCSSTransitionGroup which is used to implement basic CSS transitions and animations as a high level API.

To install React CSS Transition Group which is an add-on to React, use the prompt command.

  C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

Next step is to add a CSS file.

C:\Users\phptpoint\Desktop\reactApp>type nul > css/style.css


<!DOCTYPE html>

<html lang = "en">

   <head>

      <link rel = "stylesheet" type = "text/css" href = "./style.css">

      <meta charset = "UTF-8">

      <title>React App</title>

   </head>

   <body>

      <div id = "app"></div>

      <script src = 'index_bundle.js'></script>

   </body>

</html>


In step 3 we will create a basic component of React. ReactCSSTransitionGroup will be used as a wrapper of the component that we want to animate. TransitionAppear, TransitionAppearTimeout will be used and transitionEnter and transitionLeave will be set as false. 

Here is our app.jsx file. 

import React from 'react';

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');


class App extends React.Component {

   render() {

      return (

         <div>

            <ReactCSSTransitionGroup transitionName = "example"

               transitionAppear = {true} transitionAppearTimeout = {500}

               transitionEnter = {false} transitionLeave = {false}>

          

               <h1>Phptpoint</h1>

            </ReactCSSTransitionGroup>

         </div>     

 

      );

   }

}

export default App;


Main.js file content is:


import React from 'react'

import ReactDOM from 'react-dom';

import App from './App.jsx';


ReactDOM.render(<App/>, document.getElementById('app'));



Lastly the style.css file in css folder :

CSS/style.css


.example-appear {

   opacity: 0.07;

}

.example-appear.example-appear-active {

   opacity: 3;

   transition: opacity 50s ease-in;

}



Animations can be entered and exited as we like to add or remove elements.

App.jsx


import React from 'react';

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');


class App extends React.Component {

   constructor(props) {

      super(props);

    

      this.state = {

         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']

      }

      this.handleAdd = this.handleAdd.bind(this);

   };

   handleAdd() {

      var newItems = this.state.items.concat([prompt('Create New Item')]);

      this.setState({items: newItems});

   }

   handleRemove(i) {

      var newItems = this.state.items.slice();

      newItems.splice(i, 1);

      this.setState({items: newItems});

   }

   render() {

      var items = this.state.items.map(function(item, i) {

         return (

            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>

               {item}

            </div>

         );

      }.bind(this));

      

      return (

         <div>      

            <button onClick = {this.handleAdd}>Add Item</button>

        

            <ReactCSSTransitionGroup transitionName = "example" 

               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>

               {items}

            </ReactCSSTransitionGroup>

         </div>

      );

   }

}

export default App;


Main.js


import React from 'react'

import ReactDOM from 'react-dom';

import App from './App.jsx';


ReactDOM.render(<App/>, document.getElementById('app'));


css/style.css

example-enter {

   opacity: 0.04;

}

.example-enter.example-enter-active {

   opacity: 5;

   transition: opacity 50s ease-in;

}

.example-leave {

   opacity: 1;

}

.example-leave.example-leave-active {

   opacity: 0.04;

   transition: opacity 50s ease-in;

}