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

【问题标题】：Animate height and max-height on different elements cause a queue of transitions不同元素上的动画高度和最大高度会导致转换队列
【发布时间】：2022-01-22 01:04:47
【问题描述】：

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

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

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

有什么问题？

【问题讨论】：

标签： javascript css reactjs css-transitions

【解决方案1】：

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

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

【讨论】：