web-dev-qa-db-fra.com

Comment dois-je gérer une animation de congé dans componentWillUnmount dans React?

Je me demandais si quelqu'un pourrait donner un aperçu de la façon dont ils gèrent les animations de congé dans React.js. J'utilise Greensock TweenMax et les animations d'entrée fonctionnent bien sur componentDidMount, mais je n'ai pas trouvé de moyen fiable d'animer un composant.

Mon sentiment est qu'il devrait aller dans componentWillUnmount, mais React ne fournit aucun mécanisme de rappel pour vous indiquer quand vous êtes prêt à lâcher un composant. Par conséquent, l'animation de transition n'a jamais se termine car les animations sont asynchrones à React. Au lieu de cela, vous voyez une infime fraction de seconde d'animation, le composant disparaît et est remplacé par le composant suivant qui s'anime.

C'est un problème avec lequel je me bats depuis que j'ai commencé à utiliser React il y a 9 mois. Je ne peux pas m'empêcher de penser qu'il doit y avoir une solution autre que ReactCSSTransitionGroup qui Je trouve que c'est lourd et capricieux, surtout avec react-router.

javascriptanimationreactjstweenmax
32
jaredkwright

ReactTransitionGroup (sur lequel ReactCSSTransitionGroup est construit) est le composant de base qui permet l'entrée et la sortie asynchrones. Il fournit des crochets de cycle de vie que vous pouvez utiliser pour vous connecter à des animations basées sur JS. La liste des documents les hooks autorisés:

ReactTransitionGroup est la base des animations. Lorsque des enfants y sont ajoutés ou supprimés de manière déclarative (comme dans l'exemple ci-dessus), des crochets de cycle de vie spéciaux sont appelés sur eux. Il y a 3 façons de commencer à utiliser 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)

Ceci est appelé en même temps que componentDidMount() pour les composants qui sont initialement montés dans un TransitionGroup. Cela empêchera d'autres animations de se produire jusqu'à ce que callback soit appelé. Il n'est appelé que lors du rendu initial d'un TransitionGroup.

componentDidAppear()

Ceci est appelé après l'appel de la fonction callback transmise à componentWillAppear.

componentWillEnter(callback)

Ceci est appelé en même temps que componentDidMount() pour les composants ajoutés à un TransitionGroup existant. Cela empêchera d'autres animations de se produire jusqu'à ce que callback soit appelé. Il ne sera pas appelé lors du rendu initial d'un TransitionGroup.

componentDidEnter()

Ceci est appelé après l'appel de la fonction callback transmise à componentWillEnter.

componentWillLeave(callback)

Ceci est appelé lorsque l'enfant a été supprimé du ReactTransitionGroup. Bien que l'enfant ait été supprimé, ReactTransitionGroup le gardera dans le DOM jusqu'à ce que callback soit appelé.

componentDidLeave()

Ceci est appelé lorsque willLeavecallback est appelé (en même temps que componentWillUnmount).

Animation - API de bas nivea

Pour animer un enfant, vous devez démarrer votre animation dans componentWillLeave et appeler le callback fourni lorsque l'animation est terminée. À titre d'exemple, voici un JSFiddle montrant un composant qui anime et dérive ses enfants: http://jsfiddle.net/BinaryMuse/f51jbw2k/

Le code pertinent pour l'animation est:

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

Découvrez React-Motion

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

Cheng Lou est développeur au sein de l'équipe React.

Il parle des problèmes avec l'actuel ReactCSSTransitionGroup.

Il a développé React-Motion pour résoudre ce problème.

Bien qu'il n'utilise pas de transitions css, il semble bien fonctionner et est très déterministe. Où ReactCSSTransitionGroup semble être capricieux car vous ne pouvez pas interrompre les transitions.

2
Bodman