English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

ReactJS Basic Tutorial

ReactJS Animations

In this chapter, we will learn how to animate elements with React.

The1Step-Install the React CSS Transitions group

This is the React plugin for creating basic CSS transitions and animations. We will start fromcommand promptWindow to install it-

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

The2Step-Add CSS file

Let's create a new file style.css.

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

To be able to use it in the application, we need to link it to the head element in index.html.

<!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>

The3Step-Display animation

We will create a basic React Component. The ReactCSSTransitionGroup element will be used as a wrapper for the component we want to animate. It will use transitionAppear and transitionappmentmeout, while transitionEnter and transitionLeave are false.

App.jsx

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>My Element...</h1>
　　　　　　　　　　　　</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 animations are very simple.

css / style.css

.example-appear {
　　　opacity: 0.04;
}
.example-appear.example-appear-active {
　　　opacity:　2;
　　　transition: opacity　50s ease-in;
}

Once the application starts, the element will fade in.

Steps4-Input and output animations

When we want to add or remove elements from the list, we can use input and output animations.

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;
}

When we start the application and clickAdd Itema button, a prompt will appear.

Enter a name and press OK, the new element will fade in.

Now, we can delete some items (Item 3...Click it. This project will fade out from the list.

ReactJS Higher-Order ComponentsUsing ReactJS Flux