Состояние меню гамбургера с React/Nextjs

Итак, у меня есть компонент Navbar.js и компонент Menu.js. У меня есть состояние showMenu в Context API. Каждый раз, когда щелкают гамбургер-меню панели навигации, это состояние контекста устанавливается в значение true или false. Затем в Menu.js JSX я отображаю его только в том случае, если состояние showMenu истинно. Это прекрасно работает и с состоянием в контексте, теперь я могу импортировать панель навигации на любую страницу, и она всегда имеет доступ к состоянию showMenu.

Моя проблема в том, что анимация (скользящая слева) отображается только тогда, когда для состояния установлено значение true. Когда для состояния установлено значение false, оно просто исчезает.

Я понимаю, почему это происходит. Когда DOM перерендерится и состояние станет истинным, оно отобразит меню с его анимацией. При повторном рендеринге и состоянии false он ничего не рендерит.

Должен ли я отказаться от этого метода (и если да, то как лучше это сделать?) или есть способ заставить его работать?


person Alexander Jarl    schedule 23.05.2021    source источник
comment
Не могли бы вы поделиться примером? Я рекомендую Codesandbox.   -  person Carlo Schneider    schedule 24.05.2021
comment
Пожалуйста, добавьте код к вашему вопросу.   -  person Eyal C    schedule 24.05.2021
comment
Отвечает ли это на ваш вопрос? React — анимация монтирования и размонтирования одного компонента   -  person pilchard    schedule 24.05.2021
comment
Вы также можете использовать библиотеку вроде framer-motion. framer.com/api/motion   -  person Sean W    schedule 24.05.2021