Как мне сдвинуть сетку вверх, когда содержимое над ней скрыто?

Question

Полагаю, лучше, если я покажу вам, что я пытался. Итак, я работаю над созданием приложения погоды, чтобы выучить https://material -ui.com / . Я пытаюсь создать прототип анимации, как я ее вижу на рейсах Google, как

Я пытался сделать это, используя Grid, Fade, доступный в material-ui (я использовал последний 3.9.3). Однако в моей версии, хотя я использую Grid, когда я скрываю содержимое AppBar и Form, сетка под ним не скользит вверх. Моя версия выглядит так

Как вы видите, что я имею в виду. Итак, как мне сдвинуть контент вверх? Я поделился своим кодом на https://codesandbox.io/s/13q4mmm36q?fontsize=14

Может кто-нибудь помочь мне понять, что мне не хватает?

Answer 1

Fade просто изменит непрозрачность.Он по своей природе не устанавливает свою высоту в 0 и не становится отображаемым: ни один после исчезновения.

Просто используйте компонент Collapse material-ui в заголовке.

Код: https://codesandbox.io/s/ooyxn96mo9

Документация: https://material -ui.com / api / collapse /