How can I animate a react.js component onclick and detect the end of the animation

Upon clicks you can update the state, add a class and record the animationend event.

class ClickMe extends React.Component {
  constructor(props) {
    super(props)
    this.state = { fade: false }
  }
  render() {
    const fade = this.state.fade

    return (
      <button
        ref='button'
        onClick={() => this.setState({ fade: true })}
        onAnimationEnd={() => this.setState({ fade: false })}
        className={fade ? 'fade' : ''}>
        Click me!
      </button>
    )
  }
}

See the plnkr: https://next.plnkr.co/edit/gbt0W4SQhnZILlmQ?open=Hello.js&deferRun=1&preview

Edit: Updated to reflect current React, which supports animationend events.

React uses synthetic events, which includes animation events. Documention found here: https://reactjs.org/docs/events.html#animation-events. I updated the accepted answer below:

class ClickMe extends React.Component {
  state = {fade: false};

  render () {
    const {fade} = this.state;

    return (
      <button
        onClick={() => this.setState({fade: true})}
        onAnimationEnd={() => this.setState({fade: false})}
        className={fade ? 'fade' : ''}>
          Click me!
      </button>
    )
  }
}