Comment animer la hauteur de l'élément dans ReactCSSTransitionGroup?

Je suis en train d'animer hauteur d'élément avec ReactCSSTransitionGroup
c'est donc ce que je voudrais ressemble l'animation:

http://jsfiddle.net/cherrry/hgk4Lme9/

Le problème est que je ne sais pas forcément à la hauteur d'élément,
j'ai donc essayé de pirater le scrollHeight, clientHeight ou quelque chose de semblable au cours de componentDidMount et d'essayer de régler node.style.height ou ajouter des règles à la feuille de style

http://jsfiddle.net/cherrry/dz8uod7u/

Laissant l'animation semble bien, cependant, lorsque l'élément de l'entrée, il flash un peu et la mise à l'échelle de l'animation semble étrange

Elle doit être parce que de demander node.scrollHeight causé le rendu se produire immédiatement, ainsi en est-il de toute façon à obtenir la même information et d'injecter des règles css avant l'animation de démarrage? Ou devrais-je penser à autre sens?

Je ne suis pas très satisfait de la max-height solution, comme résultant de la vitesse d'animation sera très étrange quand max-height n'est pas proche ou la plus petite à la heightet mes composants hauteur ne varie beaucoup.

Je pouvais imaginer la solution finale pourrait être un peu brouillon,
mais je pense en faire un Mixin sera assez sympa pour les réutiliser n'importe où

source d'informationauteur Cherry Ng

  1. 9

    J'ai eu le même problème et a fini par écrire une composante autonome de l'animation de la hauteur.

    Vous pouvez voir la démo ici:
    https://stanko.github.io/react-animate-height/

    Il est beaucoup plus facile à utiliser, et l'ensemble de la bibliothèque est vraiment petit (~200 lignes)

    <AnimateHeight
  duration={ 500 }
  height={ 'auto' }
>
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>
</AnimateHeight>

    Désolé pour l'auto-promotion éhontée, mais je pense qu'il peut vous faire économiser beaucoup de temps si vous avez plus d'un composant à animer.

    Cheers!

  2. 16

    Après un peu plus d'expérience, j'ai trouvé une solution en utilisant l'API de bas niveau ReactTransitionGroup au lieu de haut-niveau ReactCSSTransitionGroup

    Voici le JSFiddle avec une solution de travail: http://jsfiddle.net/cherrry/0wgp34cr/

    Avant l'animation, c'est de faire 3 choses:

    1. sont calculés à la hauteur, les rembourrages et les marges
    2. masquer l'élément avec display: none et ajouter .anim-enter pour régler la hauteur à 0
    3. créer une règle css pour .anim-enter-active

    Pour démarrer l'animation, c'est de faire 2 choses:

    1. afficher l'élément
    2. ajouter .anim-enter-active pour démarrer l'animation

    Quelques chiffres et le nom de la classe dans JSFiddle ont été codées en dur, mais il devrait être assez facile de transformer le "mixin" dans une Réagir la classe comme un remplacement de la ReactCSSTransitionGroup