reactjs - pose - ¿Cómo animar la altura del elemento en React con ReactCSSTransitionGroup?

react transition group csstransition

Question

Estoy tratando de animar la altura del elemento con ReactCSSTransitionGroup , así es como querría que se vea la animación:

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

El problema es que no siempre conozco la altura del elemento, así que intenté hackear scrollHeight , clientHeight o algo similar durante componentDidMount e intenté establecer node.style.height o agregar reglas a la hoja de estilo

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

Dejar la animación se ve bien, sin embargo, cuando el elemento ingresa, parpadea un poco y la animación de escala se ve extraña

Debería ser por preguntar a node.scrollHeight causó que el renderizado se produjera inmediatamente, así que ¿hay alguna forma de obtener la misma información e inyectar reglas css antes de que comience la animación? ¿O debería pensar de otra manera?

No estoy muy satisfecho con la solución de max-height , ya que la velocidad de animación resultante será muy extraña cuando max-height no esté cerca de la height o sea menor, y la height mis componentes varía mucho.

Podría imaginar que la solución final podría ser un poco desordenada, pero creo que convertirla en un Mixin será lo suficientemente agradable como para reutilizarla en cualquier lugar

Answer 1

Después de un poco más de experimento, he encontrado una solución al utilizar el API ReactTransitionGroup bajo nivel en lugar del ReactTransitionGroup de alto nivel

Aquí está el JSFiddle con una solución de trabajo: http://jsfiddle.net/cherrry/0wgp34cr/

Antes de la animación, está haciendo 3 cosas:

1. Obtener altura computada, rellenos y márgenes.
2. oculte el elemento con la display: none y agregue .anim-enter para establecer la altura en 0
3. crear una regla css para .anim-enter-active

Para comenzar la animación, está haciendo 2 cosas:

1. mostrar el elemento
2. Agrega .anim-enter-active para comenzar la animación

Algunos números y el nombre de la clase en JSFiddle fueron codificados, pero debería ser lo suficientemente fácil como para transformar el "mixin" en una clase React como un reemplazo de ReactCSSTransitionGroup

Answer 2

Tuve un mismo problema y terminé escribiendo un componente independiente para animar la altura.

Puede ver la demostración aquí: https://stanko.github.io/react-animate-height/

Es mucho más fácil de usar y toda la biblioteca es muy pequeña (~ 200 líneas)

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

Lo siento por la auto promoción descarada, pero creo que puede ahorrarle mucho tiempo si tiene más de un componente para animar.

¡Aclamaciones!