JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="wrap">
</div>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
</body>
CSS
.example-enter.example-enter-active {
border: 50px solid red;
color: red;
}
Babel + JSX
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var App = React.createClass({
arr: [1,2,3],
render: function(){
var items = this.arr.map(function(item){
return <h1 key={item}>{item}</h1>
})
return(
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
)
}
})
ReactDOM.render(
<App></App>,
document.getElementById("wrap")
)