Wie kann ich eine react.js Komponente animieren onclick und das Ende der Animation erkennen

Question

Ich möchte eine reagierende Komponente umdrehen lassen, wenn ein Benutzer auf das DOM Element klickt. Ich sehe einige Dokumentationen über ihren Animations Mix, aber es sieht so aus, als ob sie für "Enter" und "Leave" Events eingerichtet sind. Was ist der beste Weg, dies als Reaktion auf einige Benutzereingaben zu tun und benachrichtigt zu werden, wenn die Animation startet und beendet wird? Momentan habe ich einen Listeneintrag und möchte, dass er einige Tasten wie Löschen, Bearbeiten, Speichern umdrehen lässt. Vielleicht habe ich etwas in den Unterlagen verpasst.

Animation mixin

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

Answer 1

Bei Klicks können Sie den Status aktualisieren, eine Klasse hinzufügen und das Ereignis animationend aufzeichnen.

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

Siehe jsfiddle: https://jsfiddle.net/9eqpfv0k/1/

Answer 2

ich nie React benutzt habe, aber wenn es CSS3 animations/transitions verwendet, können Sie in der Lage sein, so etwas zu tun:

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

    console.log('Complete'); 

}, false); 

Answer 3

ich diese erfolgreich eingesetzt project In meiner Reaktion Hammer Integration project gibt es einige Beispiele mit Hammer-Events und reagieren Animation.