how to create slider effect on rendering new elements from state in reactjs?

When switching data by selecting slice from an array, putting it into state and rendering by setInterval, I try to create a slider effect by clicking up and down arrows:

UPDATE START

I was finally able to create slider using technique from this codepen: http://codepen.io/sergiodxa/pen/aOYdeN

UPDATE END

var MainContainer = React.createClass({
    getInitialState: function () {
        return {
            position: 0,
            max_elements: 3,
            data: [],
            source: Array.prototype.slice.call([1, 2, 3, 4, 5, 6, 7]).reverse()
        }
    },
    componentDidMount: function () {
        setInterval(this.updateState, 10);
    },
    arrowUp: function () {
        if (this.state.position > 0) {
            this.state.position--;
            this.updateState();
        }

    },
    arrowDown: function () {
        if (this.state.source.length - this.state.position > this.state.max_elements) {
            this.state.position++;
            this.updateState();
        }

    },
    updateState: function () {

        data = this.state.source.slice(this.state.position, this.state.position + this.state.max_elements)
        this.setState({data: data});
        console.log(this.state.data);
    },

    render: function () {
        var Items = this.state.data.map(function (item, i) {
            return (
                <div key={i}>
                    <SimpleItem message={item} active={i == 0 ? true : false}/>
                </div>
            );
        }, this);

        return (
            <div>
                {Items}
                <ArrowUp onClick={this.arrowUp}/>
                <ArrowDown onClick={this.arrowDown}/>
            </div>
        );
    }
});

var ArrowUp = React.createClass({
    render: function () {
        return (
            <a href="#" className="glyphicon glyphicon-arrow-up" onClick={this.props.onClick}>
            </a>
        );
    }
});

var ArrowDown = React.createClass({
    render: function () {
        return (
            <a href="#" className="glyphicon glyphicon-arrow-down" onClick={this.props.onClick}>
            </a>
        );
    }
});

var SimpleItem = React.createClass({
    render: function () {
        var className = "well well-lg"
        var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
        className = this.props.active ? className + " active" : className;
        return (
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionAppear={true} transitionAppearTimeout={500}
                transitionEnter={false} transitionLeave={false}
            >
                <div className={className}>
                    {this.props.message}
                </div>
            </ReactCSSTransitionGroup>
        );
    }

});
ReactDOM.render(<MainContainer />, document.getElementById('container'));

The animation is only seen when components render for the first time, re-rendered elements won't animate, for some reason.

My styles are:

.example-appear {
    opacity: 0.01;
}

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

I'm not a frontend guy so any hint or link would be much appreciated.