JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="switch"></div>

CSS

.button {
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 25px;
    font: bold 20px Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #000;
}
.button.on {
    color: #00FF00;
    background-color: #006600;
}

.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
    transition: opacity 500ms ease-in;
}
.switch-leave {
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

JavaScript 1.7

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

const Off  = React.createClass({
	componentWillUnmount () {
		this.props.handleTransitionEnd();
	},
	render()  {
		return (
			<div className="off button">OFF</div>
		)
	}
});

const On  = React.createClass({
	componentWillUnmount () {
		this.props.handleTransitionEnd();
	},
	render()  {
		return (
			<div className="on button">ON</div>
		)
	}
});

var Switch = React.createClass({
    getInitialState: function() {
        return {
            on: false,
            transitionEnd: true
        };
    },
    
    toggle: function(e) {
        this.setState({
        	on: !this.state.on,
            transitionEnd: false
        });
    },
    
    handleTransitionEnd() {
		this.setState({transitionEnd: true});
	},
    
    renderOff() {
		if (! this.state.on && this.state.transitionEnd) {
			return (
				<Off key="off" handleTransitionEnd={this.handleTransitionEnd} />
			)
		}
	},

	renderOn() {
		if (this.state.on && this.state.transitionEnd) {
			return (
				<On key="on" handleTransitionEnd={this.handleTransitionEnd} />
			)
		}
	},
    
    render: function() {
        return (
            <div>
        	  <button onClick={this.toggle}>Toggle</button>
              <ReactCSSTransitionGroup transitionName="switch">
                {this.renderOff()}
                {this.renderOn()}
              </ReactCSSTransitionGroup>
            </div>
        );         
    }
});

React.render(<Switch/>, document.getElementById("switch"));