Edit in JSFiddle

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var Switch = React.createClass({
    getInitialState: function() {
        return {
            on: false
        };
    },
    toggleOnOff: function(e) {
        this.setState({on: !this.state.on});
    },
    render: function() {
        var text = this.state.on ? "ON" : "OFF";
        var className = this.state.on ? "on" : "";
        className += " button"
        
        var key = text;
        return (
            <ReactCSSTransitionGroup transitionName="switch">
                <div key={key} className={className} onClick={this.toggleOnOff}>{text}</div>
            </ReactCSSTransitionGroup>
        );
            
    }
});

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

<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="switch"></div>

.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;
    /* Define transition on the "opacity" property. */    
    transition: opacity 0.5s ease-in;
}
.button.on {
    color: #00FF00;
    background-color: #006600;
}

.button.switch-enter {
    opacity: 0.01;
}
.button.switch-enter.switch-enter-active {
    opacity: 1.0;
}
.button.switch-leave {
    /* Completely hide the button while it's being animated and before it's removed from the DOM. */
    visibility: hidden;
    height: 0px;
    width: 0px;
    
    /* Starting opacity */
    opacity: 1.0;
}
.button.switch-leave.switch-leave-active {
    /* Ending opacity: 
    Trigger opacity change so the "transitionend" event will fire, causing React to remove from the DOM. */
    opacity: 0;
}