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

Question

I want to have a react component flip over when a user clicks on the DOM element. I see some documentation about their animation mixin but it looks to be set up for "enter" and "leave" events. What is the best way to do this in response to some user input and be notified when the animation starts and completes? Currently I have a list item and I want it to flip over an show a few buttons like delete, edit, save. Perhaps I missed something in the docs.

animation mixin

http://facebook.github.io/react/docs/animation.html

Answer 1

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.

Answer 2

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>     )   } }