'Animate change in height of a Component in React
I have a react app similar to what is shown in this codesandbox link https://codesandbox.io/s/animateheightchange-pf4lf?file=/src/App.js
The App has multiple instances of CompleteItem.
CompleteItem in-turn has Content1 & Content2. Content2 is rendered conditionally (by clicking the Toggle button at the bottom on the page)
This conditional rendering leads to change in the height of CompleteItem because this component houses both Content1 & Content2.
I know I can animate the entry & exit of Content2 with react-transition-group. However, How do I animate the height increase (the difference between 'original height' and 'new height') of the CompleteItem? Right now the change in height is abrupt & I want it to change smoothly upwards & downwards.
The contents are dynamic, hence I do NOT know the 'original height' or the 'new height' before hand.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|