React animazioni del ciclo di vita

Question

Sto cercando di trovare un modo per eseguire l'animazione in base al ciclo di vita di ReactElement, è piuttosto facile fare un'animazione quando il componente è appena stato montato, ma ne farei un altro prima di smontare il componente.

Non posso davvero utilizzare ReactCSSTransitionGroup perché non utilizzerà RequestAnimationFrame.

Solo per descrivere un po 'il mio caso, il mio componente è una barra laterale, che posso attivare/disattivare a seconda degli input dell'utente.

var Sidebar = React.createClass({ 
    componentDidMount: function() { 
     var menuUfeWidth = $('.menu-ufe').width(); 
     $(this.getDOMNode()).transition({x: menuUfeWidth}, Utils.animationDuration * 2, 'snap'); 
    }, 
    render: function() { 
     return (
      <div className={'leaflet-sidebar left'}> 
       <div className={'ufe-content'} /> 
      </div> 
     ); 
    } 
}); 

Mi chiedo come faresti a lavorare per essere in grado di avere un'animazione prima dello smontaggio del componente.

Answer 1

ReactCSSTransitionGroup è solo una versione specializzata di ReactTransitionGroup che chiama componentWillEnter, componentDidEnter, componentWillLeave, e componentDidLeave, sulla base di CSS definito.

Se non si desidera utilizzare le animazioni CSS, si può semplicemente utilizzare ReactTransitionGroup e utilizzare un componente che implementa these lifecycle hooks utilizzando animazioni RAF-based:

<ReactTransitionGroup component="div> 
    <MyCustomReactTransitionComponent key={...} /> 
</ReactTransitionGroup> 

Ecco un esempio che ho trovato da un altro SO messaggio: http://jsbin.com/jebumipimo/1/edit?html,console,output