Come posso animare un componente react.js onclick e rilevare la fine dell'animazione

Question

Voglio che un componente di reazione capovolga quando un utente fa clic sull'elemento DOM. Vedo qualche documentazione sul loro mix di animazione, ma sembra essere impostato per gli eventi "enter" e "leave". Qual è il modo migliore per farlo in risposta a qualche input dell'utente e ricevere una notifica quando l'animazione inizia e termina? Attualmente ho una voce di elenco e voglio che capovolga uno show alcuni pulsanti come cancella, modifica, salva. Forse mi sono perso qualcosa nei documenti.

animazione mixin

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

Answer 1

Sui clic è possibile aggiornare lo stato, aggiungere una classe e registrare l'evento animationend.

class ClickMe extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = {} 
    this.state.fade = false 
    this.fadingDone = this.fadingDone.bind(this) 
    } 
    componentDidMount() { 
    const elm = this.refs.button 
    elm.addEventListener('animationend', this.fadingDone) 
    } 
    componentWillUnmount() { 
    const elm = this.refs.button 
    elm.removeEventListener('animationend', this.fadingDone) 
    } 
    fadingDone() { 
    // will re-render component, removing the animation class 
    this.setState({fade: false}) 
    } 
    render() { 
    const fade = this.state.fade 

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

Vedere il jsfiddle: https://jsfiddle.net/9eqpfv0k/1/

Answer 2

Non ho mai usato React, ma se usa CSS3 animations/transitions, si potrebbe essere in grado di fare qualcosa del genere:

element.addEventListener('webkitTransitionEnd', function(event) { 

    console.log('Complete'); 

}, false); 

Answer 3

ho usato con successo questo project Nell'integrazione con il mio martello reagente project ci sono alcuni esempi con eventi di martello e l'animazione di reazione.