ReactJS动画

在本章中，我们将学习如何使用React来动画元素。

第1步 - 安装React CSS转换组

这是React插件，用于创建基本的CSS转换和动画。我们将从 命令提示符 窗口安装它-

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

第2步 - 添加一个CSS文件

让我们在里面创建一个新的文件夹 css 和文件 style.css 。为了能够在应用程序中使用它，我们需要将它链接到 index.html中 的 head 元素。

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

第3步 - 出现动画

我们将创建一个基本的React组件。该 ReactCSSTransitionGroup 元素将作为我们想动画组件的包装。它将使用 transitionAppear 和 transitionAppearTimeout ，而 transitionEnter 和 transitionLeave 为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动画非常简单。

CSS / style.css文件

.example-appear {
   opacity: 0.01;
}
.example-appear.example-appear-active {
   opacity: 1;
   transition: opacity 500ms ease-in;
}

一旦我们启动应用程序，该元素将淡入。

反应动画显示

第4步 - 输入并保留动画

当我们想要添加或删除列表中的元素时，可以使用输入和离开动画。

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.01;
}
.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 500ms ease-in;
}

当我们启动应用程序并点击 添加项目 按钮时，会出现提示。

反应动画提示

一旦我们输入了名字并按下确定，新元素就会淡入。

反应动画输入

现在我们可以通过点击删除一些项目（ Item 3 ... ）。此项目将从列表中淡出。

反应动画离开