Tengo una aplicación de reacción similar a la que se muestra en este enlace de codesandbox https://codesandbox.io/s/animateheightchange-pf4lf?file=/src/App.js

La App tiene varias instancias de CompleteItem .

CompleteItem a su vez tiene Content1 y Content2 . Content2 se procesa condicionalmente (haciendo clic en el botón Toggle en la parte inferior de la página)

Esta representación condicional genera un cambio en la altura de CompleteItem porque este componente alberga tanto Content1 como Content2 .

Sé que puedo animar la entrada y salida de Content2 con react-transition-group. Sin embargo, ¿cómo animo el height increase (la diferencia entre 'altura original' y 'nueva altura') del CompleteItem ? En este momento, el cambio de altura es abrupto y quiero que cambie suavemente hacia arriba y hacia abajo.

Los contenidos son dinámicos, por lo tanto, NO conozco la 'altura original' o la 'nueva altura' de antemano.