const{ CSSTransitionGroup} = React.addons;

​

class App extends React.Component {

    constructor(props){

        super(props);

        this.state={items: ['hello', 'world', 'click', 'me']};

    }

    handleAdd() {

        let {items} = this.state

        this.setState({items: [...items, 'new-element'+(items.length+1)]});

    }

    handleRemove(i) {

        var newItems = this.state.items.slice();

        newItems.splice(i, 1);

        this.setState({items: newItems});

    }

    render() {

        var items = this.state.items.map((item, i)=>

        <div key={item} className="block" onClick={this.handleRemove.bind(this, i)}>

        {item}

        </div>

    );

    return (

        <div>

        <button onClick={this.handleAdd.bind(this)}>Add Item</button>

        <CSSTransitionGroup

        transitionName={{

            enter: "animated",

            enterActive: "rubberBand",

            leave: "animated",

            leaveActive: "fadeOutRight"

        }}>

        {items}

        </CSSTransitionGroup>

        </div>

    );

}

​

​

}

                ReactDOM.render(<App/>,document.getElementById('root'))