Animating new components

At the moment, new pages are just appearing. There's no subtle animation to ease them in. Let's change that!

We will use a new React component for this, and we can find it in the add-ons build of React. Go back to the React scripts you downloaded in the first chapter and replace all references to react.js with react-with-addons.js.

This gives us access to a new component called CSSTransitionGroup:

render() {
    var itemStyle = this.props.itemStyle || {
        "minHeight": "40px",
        "lineHeight": "40px",
        "fontSize": "18px",
        "fontFamily": "Helvetica"
    };

    return <div>
        <div>
            <button
                onClick={this.onInsert}>
                create new page
            </button>
        </div>
        <ol>
            <React.addons.CSSTransitionGroup
                transitionName="page"
                transitionEnterTimeout={150}
                transitionLeaveTimeout={150}>
  ...