javascript - helmet - ¿Cómo debo manejar una animación de licencia en componentWillUnmount en React?

react title

Question

Me preguntaba si alguien podría proporcionar alguna información sobre cómo manejan las animaciones de permisos en React.js. He estado usando Greensock TweenMax y las animaciones de entrada funcionan bien en componentDidMount , pero no he encontrado una manera confiable de animar un componente.

Mi sensación es que debería ir en el componentWillUnmount WillUnmount, pero React no proporciona ningún mecanismo de devolución de llamada para que usted indique cuándo está listo para soltar un componente. Por lo tanto, la animación de transición nunca se completa, ya que las animaciones son asíncronas a Reaccionar. En cambio, ves una pequeña fracción de segundo de animación, el componente desaparece y es reemplazado por el siguiente componente que se anima.

Este es un problema con el que he luchado desde que comencé a usar React hace 9 meses. No puedo evitar pensar que tiene que haber una solución que no sea ReactCSSTransitionGroup que me parece engorrosa y delicada, especialmente con el router de reacción.

Answer 1

Echa un vistazo a React-Motion

youtube.com/watch?v=1tavDv5hXpo

Cheng Lou es un desarrollador del equipo React.

Él habla sobre los problemas con el actual ReactCSSTransitionGroup.

Ha desarrollado React-Motion para solucionar este problema.

Aunque no utiliza transiciones CSS, parece funcionar bien y es muy determinista. Donde ReactCSSTransitionGroup parece ser quisquilloso ya que no puede interrumpir las transiciones.

Answer 2

ReactTransitionGroup (sobre el cual se construye ReactCSSTransitionGroup ) es el componente base que permite la entrada y salida asincrónica. Proporciona ganchos de ciclo de vida que puede usar para enganchar en animaciones basadas en JS. Los documentos enumeran los ganchos permitidos:

ReactTransitionGroup es la base de las animaciones. Cuando los niños se agregan o eliminan de forma declarativa (como en el ejemplo anterior) se les solicitan anzuelos especiales de ciclo de vida. Hay 3 formas de comenzar a utilizar 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)

Esto se llama al mismo tiempo que componentDidMount() para los componentes que se montan inicialmente en un TransitionGroup . Bloqueará que ocurran otras animaciones hasta que se llame a la callback llamada. Solo se invoca en la representación inicial de un TransitionGroup .

componentDidAppear()

Esto se invoca después de llamar a la función de callback que se pasó a componentWillAppear .

componentWillEnter(callback)

Esto se llama al mismo tiempo que componentDidMount() para componentes agregados a un TransitionGroup existente. Bloqueará que ocurran otras animaciones hasta que se llame a la callback llamada. No se invocará en la representación inicial de un TransitionGroup .

componentDidEnter()

Esto se invoca después de llamar a la función de callback que pasó a componentWillEnter .

componentWillLeave(callback)

Esto se llama cuando el niño ha sido eliminado del ReactTransitionGroup . Aunque el niño ha sido eliminado, ReactTransitionGroup lo mantendrá en el DOM hasta que se llame de nuevo.

componentDidLeave()

Se willLeave cuando se llama a la willLeave callback willLeave (al mismo tiempo que componentWillUnmount ).

^{Animación - API de bajo nivel}

Para animar a un niño, debe comenzar su animación en componentWillLeave y llamar a la callback proporcionada cuando la animación esté completa. Como ejemplo, aquí hay un JSFiddle que muestra un componente que escalona-anima a sus hijos dentro y fuera: http://jsfiddle.net/BinaryMuse/f51jbw2k/

El código relevante para animar es:

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