Adding Transition Effects to React Apps

Photo by Mitchell Orr on Unsplash

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to add transition effects to React apps.

ReactCSSTransitionGroup

We can use the react-addons-css-transition-group to add the libraries to create animations effects in our React app.

The package will let us create and add CSS transition effects to our React app.

For example, we can create a dynamic list with a fade effect as we click on a button to add items and click on items to remove them as follows:

styles.css :

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

index.js :

import React from "react";
import ReactDOM from "react-dom";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import "./styles.css";
const words = ["foo", "bar", "baz"];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: words };
  }
  handleAdd() {
    const newItem = words[Math.floor(Math.random() * words.length)];
    this.setState({ items: [...this.state.items, newItem] }, () => {});
  }
  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={i} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));
return (
      <div>
        <button onClick={this.handleAdd.bind(this)}>Add Item</button>
        <ReactCSSTransitionGroup
          transitionName="fade"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}