React教程19：动画

本节教程将向你演示如何用React做动画元素。

第1步 – 安装 React CSS Transitions Group

这是React的一个附加创建基本 CSS 动画的插件。通过npm命令安装。

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

第2步 – 添加 CSS 文件

这里建个目录 css 并在其中新建 style.css 文件。在 index.html 的 head 中引入该css。

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

第2A步- 显示动画

这里我们创建基本的React Component。 ReactCSSTransitionGroup 元素回用来作为我们动画元素的wrapper。 你可以看到当 transitionEnter 和 transitionLeave 为 false时候，它在使用 transitionAppear 和 transitionAppearTimeout 。

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

启动 app, 我们的元素会渐变进入。 

第2B步 – 动画入场和结束效果

动画入场和结束效果在我们从list中添加或删除元素时候很有用。

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

当app运行时，我们点击 Add Item 按钮，弹窗就会出现。



我们输入名字并点击OK以后，新元素会渐变进入。



现在我们点击删除其中的一些元素 (Item 3...) 。 这个元素会从list中渐变退出。