React recursive timer animation

react-cursive-timer.jsx

'use strict';

var React = require('react');

var Switch = React.createClass({
  getInitialState: function() {
    return {
      switch: true
    }
  },
  componentDidMount: function() {
    this.interval = setInterval(this.flip, 1500);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval)
  },
  flip: function() {
    this.setState({ switch: !this.state.switch });
  },
  render: function() {
    return (
      <div className={this.state.switch ? 'on' : 'off'}>
        {this.state.switch ? 'on' : 'off'}
      </div>
    )
  }
});

module.exports = Switch;

style.css

div{-webkit-transition:all .5s;text-transform:uppercase;}
.on{color:green;font-size:100px}
.off{color:red;font-size:50px}