不同元素上的动画高度和最大高度会导致转换队列

Question

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

我有一个简单的组件，有两个动画：第一个关于高度(从0%到100%(，第二个关于最大高度。我不明白为什么它们能同时工作：第二部动画似乎在等待第一部动画完成后才开始。

预期的行为是动画同时开始和结束。

问题出在哪里？

Answer 1

由于定位问题，我会再次构建样式，但如果您想对此问题进行快速修补，请在103行更改maxHeight: isHeightFull ? 0 : 50的maxHeight: isHeightFull ? 0 : 500

为了改进样式，请尝试在两个最重要的容器中添加边框，然后找出如何以不重叠的方式构建它。