Animations with react js

Posted By : Rajan Rawat | 30-Jul-2018

Whenever we build a web application UI, I have always like the transitions and animations. It's not about just popping the things out and in. Animation in reactjs is always been a intresting and fuzzy subject. when you need a animations like fade in and slide in that brings the professional look and jQuery made this so easy for us for a long time. Then the new frameworks like angularjs , knockoutjs, backbone js and react js came into the market and suddenly the jQuery is not only the way for animations or to manipulate the DOM. Many of the developers don’t even know how to start building a cool and crisy animations UI

There are some packages that help us like some given below

React motion
React animated
React-transition-group

ReactCSSTransitionGroup - this a very high-level api which is based on ReactTransitionGroup and this is a very easy way to perform animations and transitions. It is performed when a react component enters the DOM or leaves the DOM. It’s imported by the ng-animate library

How to import

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

How to use in component

                class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handle = this.handle.bind(this);
  }

  handle() {
    const myItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: myItems});
  }

  handleRemove(i) {
    let myItems = this.state.items.slice();
    myItems.splice(i, 1);
    this.setState({items: myItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (

this.handleRemove(i)}> {item}

)); return (

{items}

); } }

before doing this you should provide the attribute key for all the childrens of ReactCSSTransitionGroup. when you are rendering a single item. This is the way how react will know or determine the children which is entered

Conclusion - when you are using the ReactCSSTransitionGroup, you have no way to find for your component to be noticed when a animation or transition has ended or it has to be performed