JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>

<div id="app">
</div>

React

var TransitionGroup = React.addons.TransitionGroup;
var duration = 1000;
var AnimationComponent = React.createClass({
  componentWillEnter: function(callback) {
    console.log("component will enter");
    $(this.getDOMNode()).hide();
    callback();
  },
  componentDidEnter: function() {
    $(this.getDOMNode()).show(duration);
    console.log("component did enter");
  },
  componentWillLeave: function(callback) {
    console.log("component will leave");
    $(this.getDOMNode()).hide(duration, callback);
  },
  componentDidLeave: function() {
    console.log("component did leave");
  },
  render: function() {
    return <div>{this.props.text}</div>
  }
});

var Hello = React.createClass({
  getInitialState: function() {
    return {
      value: '(´・ω・｀)'
    };
  },
  onClick: function() {
    var value = this.state.value === '(´・ω・｀)' ? '(｀･ω･´)ゞ' : '(´・ω・｀)';
    this.setState({ value: value });
  },
  render: function() {
    var value = <AnimationComponent key={this.state.value} text={this.state.value} />; 
    return (
      <div>
        <div>Animation!!<button onClick={this.onClick}>click!!</button></div>
        <TransitionGroup>
          {value}
        </TransitionGroup>
      </div>
    );
  }
});

React.render(<Hello />, document.body);