Animating non-existant elements in React.js

Question

I have a list of titles and when one of them is clicked an is opened with additional information.

My goal is to animate the appearance of this unordered list using react. I'm using React.addons.CSSTransitionGroup as described in React's docs .

var React = require('react/addons');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

....
render: function(){
    var ninjas = this.props.ninjaList.map(function(ninja, i){
            return (<li key={ninja} style={style.li}> {ninja} </li>);
        });
    var list = (this.state.showList ?  <ul style={style.ul}> {ninjas} </ul>  : '');
    return (
        <div style={style.wrapper}>
        <img style={style.img} src={this.props.imgPath} />
        <h5 style={style.h5} onClick={this.showList}> {this.props.title} </h5>
        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionEnterTimeout={1500} transitionLeaveTimeout={1300}>
        {list}
        </ReactCSSTransitionGroup>
        </div>
        );
}

The css is taken from their example -

.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 300ms ease-in;
}
.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

Here's a codepen i found about it - CodePen

That's basically it, looking for a reason why it doesn't work. Would love your help, thanks!

Answer 1

Thanks to a colleague of mine, the problem was found -

As you can see in my code, both the <ul> & <li> elements have their on 'style' attribute that interfered with the CSS of the transition.

I'm going to dig in deeper to find a way to workaround it, will post an update.