Jak można animować komponent react.js onclick i wykrywać koniec animacji?

Question

Chcę, aby komponent reagowania przerzucał się, gdy użytkownik kliknie element DOM. Widzę pewną dokumentację na temat ich miksu animacji, ale wygląda na to, że jest skonfigurowana dla zdarzeń "wejdź" i "opuść". Jaki jest najlepszy sposób, aby to zrobić w odpowiedzi na niektóre dane wprowadzone przez użytkownika i otrzymywać powiadomienia, gdy animacja się rozpocznie i skończy? Obecnie mam element listy i chcę, aby przewertował pokaz na kilka przycisków, takich jak delete, edit, save. Być może przegapiłem coś w dokumentach.

animacja mixin

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

Answer 1

Po kliknięciu można zaktualizować stan, dodać klasę i nagrać wydarzenie 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> 
    ) 
    } 
} 

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

Answer 2

nigdy nie używałem React, ale jeśli korzysta CSS3 animations/transitions, może być w stanie zrobić coś takiego:

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

    console.log('Complete'); 

}, false); 

Answer 3

ja z powodzeniem stosować ten project w mojej integracji z młotkiem reakcyjnym project jest kilka przykładów zdarzeń młota i animacji reagowania.