Wie sollte ich eine Leave-Animation in ComponentWillUnmount in React behandeln?

Question

Ich habe mich gefragt, ob irgendjemand einen Einblick geben könnte, wie sie mit Leave-Animationen in React.js umgehen. Ich habe Greensock TweenMax verwendet und die Enter-Animationen funktionieren gut auf componentDidMount, aber ich habe keine zuverlässige Möglichkeit gefunden, eine Komponente aus zu animieren.

Mein Gefühl ist, dass es ingehen sollte, aber React bietet keinen Callback-Mechanismus für Sie, um anzuzeigen, wenn Sie bereit sind, eine Komponente loszulassen. Daher wird die Übergangsanimation nie abgeschlossen, da die Animationen asynchron zu React sind. Stattdessen sehen Sie einen winzigen Bruchteil einer Sekunde der Animation, die Komponente verschwindet und wird durch die nächste animierende Komponente ersetzt.

Dies ist ein Problem, mit dem ich seit dem Beginn der Verwendung von React vor 9 Monaten zu kämpfen habe. Ich kann nicht anders, als zu denken, dass da draußen eine andere Lösung sein muss als ReactCSSTransitionGroup, die ich als umständlich und knifflig empfinde, besonders mit react-router.

Answer 1

ReactTransitionGroup (auf denen ReactCSSTransitionGroup gebaut ist) ist die Basiskomponente, die asynchrone Eingabe und verlassen können. Es bietet Lebenszyklus-Hooks, mit denen Sie sich in JS-basierte Animationen einklinken können. The docs list die erlaubten Haken:

ReactTransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them. There are 3 ways to get starting using ReactCSSTransitionGroups :

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js 

componentWillAppear(callback)

This is called at the same time as componentDidMount() for components that are initially mounted in a TransitionGroup . It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup .

componentDidAppear()

This is called after the callback function that was passed to componentWillAppear is called.

componentWillEnter(callback)

This is called at the same time as componentDidMount() for components added to an existing TransitionGroup . It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup .

componentDidEnter()

This is called after the callback function that was passed to componentWillEnter is called.

componentWillLeave(callback)

This is called when the child has been removed from the ReactTransitionGroup . Though the child has been removed, ReactTransitionGroup will keep it in the DOM until callback is called.

componentDidLeave()

This is called when the willLeave callback is called (at the same time as componentWillUnmount).

^{Animation - Low-level API}

Um ein Kind aus zu animieren, müssen Sie Ihre Animation in componentWillLeave zu starten und rufen Sie die zur Verfügung gestellt callback wenn der Die Animation ist abgeschlossen. Als Beispiel zeigt here's a JSFiddle eine Komponente, die ihre Kinder in und aus taumeln-beseelt: http://jsfiddle.net/BinaryMuse/f51jbw2k/

Der entsprechende Code für die Animation aus ist:

componentWillLeave: function(callback) { 
    this._animateOut(callback); 
}, 

_animateOut(callback) { 
    var el = ReactDOM.findDOMNode(this); 
    setTimeout(function() { 
    TweenLite.to(el, 1, {opacity: 0}).play().eventCallback("onComplete", callback); 
    }, this.props.animateOutDelay); 
}, 

Answer 2

Check out React-Motion

https://www.youtube.com/watch?v=1tavDv5hXpo

Cheng Lou ist Entwickler im React-Team.

Er spricht über die Probleme mit der aktuellen ReactCSSTransitionGroup.

Er hat React-Motion zur Behebung dieses Problems entwickelt.

Obwohl es keine CSS-Übergänge verwendet, scheint es gut zu funktionieren und ist sehr deterministisch. Wo als ReactCSSTransitionGroup scheint zu sein, da Sie Übergänge nicht unterbrechen können.