Codesandbox: https://codesandbox.io/s/gallant-cori-hdj5w?file=/src/App.js

I have this simple component with two animations: the first one on the height (from 0% to 100%) and the second one on the max-height. I didn't understand why they works but not at the same time: the second animation seems like waits the first animation to finish before to start.

The expected behaviour is that both the animation start and end together.

What is the problem?

CodePudding user response：

I would build the styling again due to positioning problems, but if you want a fast patch for this issue change maxHeight: isHeightFull ? 0 : 500 on line 103 for maxHeight: isHeightFull ? 0 : 50

To improve the styling try adding borders to your two most important containers and then figure out how to build it in such a way that they don't superimpose.