React Lifecycle Animationen

Question

Ich versuche, eine Möglichkeit zu finden, Animation je nach ReactElement Lebenszyklus durchzuführen, es ist ziemlich einfach, eine Animation zu machen, wenn die Komponente gerade montiert wurde, aber ich würde eine andere tun, bevor die Komponente unmounten.

Ich kann nicht wirklich die ReactCSSTransitionGroup verwenden, weil das RequestAnimationFrame nicht verwenden wird.

Um nur ein bisschen mein Fall zu beschreiben, ist meine Komponente eine Sidebar, die ich abhängig von einigen Benutzereingaben ein-/ausschalten kann.

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

Ich frage mich, wie würden Sie Ihren Weg arbeiten, um eine Animation vor der Komponente unmounten zu haben.

Answer 1

ReactCSSTransitionGroup ist nur eine spezielle Version von ReactTransitionGroup die componentWillEnter nennt, componentDidEnter, componentWillLeave und componentDidLeave basierend auf definierten CSS.

Wenn Sie keine CSS-Animationen verwenden möchten, können Sie einfach ReactTransitionGroup verwenden und eine Komponente verwenden, die these lifecycle hooks mit RAF-basierte Animationen implementiert:

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

Hier ist ein Beispiel, das ich von einem anderen SO Post gefunden: http://jsbin.com/jebumipimo/1/edit?html,console,output