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