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

Question

代码沙盒： https://codesandbox.io/s/gallant-cori-hdj5w?file=/src/App.js

我有这个带有两个动画的简单组件：第一个在高度上（从 0% 到 100%），第二个在最大高度上。 我不明白为什么它们起作用但不是同时起作用：第二个 animation 似乎要等待第一个 animation 完成才能开始。

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

问题是什么？

Answer 1

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

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