content: import React, { Component } from 'react';
  import { Button } from 'antd';
  import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
  import { List } from 'immutable';
  import './style';
  
  function randomcolor() {
    const colorvalue = ['0', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    let index;
    let colorprefix = '#';
    let i = 0;
    while (i < 6) {
      index = Math.round(Math.random() * 14);
      colorprefix += colorvalue[index];
      i += 1;
    }
    return colorprefix;
  }
  class ReactAnimate extends Component {
    state = {
      count: 3,
      todos: List([{ index: '0', color: 'green' }, { index: '1', color: 'red' }, { index: '2', color: 'blue' }]),
    };
    handleTodoItemClick = (i) => {
      this.setState({ todos: this.state.todos.filter((item, index) => index !== i) });
    }
    handleAddClick = () => {
      const node = { index: this.state.count, color: randomcolor() };
      // 每次添加后使count + 1
      const count = this.state.count + 1;
      this.setState({ todos: this.state.todos.push(node), count });
    }
    handleDelClick = () => {
      this.setState({ todos: this.state.todos.pop() });
    }
    render() {
      const { todos } = this.state;
      const items = todos.map((item, index) => (
        <div
          key={item.index}
          style={{ background: item.color }}
          onClick={e => this.handleTodoItemClick(index)}
          className="todo-item"
        >
          {item.index}
        </div>
      ));
      return (
        <div className="REACT-ANIMTE">
          <div className="button-box">
            <Button onClick={this.handleAddClick}>添加</Button>
            <Button style={{ marginLeft: '10px' }} onClick={this.handleDelClick}>删除</Button>
          </div>
          <div className="todo">
            <ReactCSSTransitionGroup
              transitionName="todo-item"
              transitionAppear
              transitionAppearTimeout={500}
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}
            >
              {items}
            </ReactCSSTransitionGroup>
          </div>
        </div>
      );
    }
  }
  
  export default ReactAnimate;
  