javascript - Grid 上面的内容被隐藏了，如何向上滑动？

Question

我想，如果我向您展示我的尝试会更好。所以，我正在努力构建一个天气应用程序以学习 https://material-ui.com/ .我正在尝试制作动画原型(prototype)，就像我在 Google 航类中看到的那样

我尝试使用 material-ui 中可用的 Grid、Fade 来做到这一点(我使用的是最新的 3.9.3)。然而，在我的版本中，即使我使用 Grid，当我隐藏 AppBar 和 Form 内容时，它下面的网格不会向上滑动。我的版本看起来像

如您所见，我的意思是。那么，如何向上滑动内容呢？我已经在 https://codesandbox.io/s/13q4mmm36q?fontsize=14 分享了我的代码

有人可以帮助我了解我所缺少的吗？

Answer 1

淡入淡出只会改变不透明度。它不会固有地将其高度设置为 0 或在淡出后变为显示:无。

只需在 Header 上使用 material-ui Collapse 组件即可。

代码: https://codesandbox.io/s/ooyxn96mo9

文档: https://material-ui.com/api/collapse/