Javascript 带有React/Nextjs的汉堡包菜单状态

所以我有一个Navbar.js组件和一个Menu.js组件。我在上下文API中有一个名为showMenu的状态。每次单击导航栏的汉堡菜单时，该上下文状态都设置为true或false。然后在Menu.js JSX中，我只在showMenu状态为true时渲染它。 这在上下文中的状态下工作得很好，我现在可以在任何页面中导入导航栏，并且它始终可以访问showMenu状态

我的问题是动画（从左滑入）仅在状态设置为true时显示。当状态设置为false时，它将消失

我知道为什么会这样。当DOM重新渲染且状态为true时，它将显示带有动画的菜单。当它重新渲染并且状态为false时，它不会渲染任何内容

---

我应该放弃这种方法吗（如果是的话，有什么更好的方法可以做到这一点呢？）或者有什么方法可以让它发挥作用吗？

你能分享一个例子吗？我推荐Codesandbox。请在您的问题中添加一些代码。这是否回答了您的问题？也可以使用像帧运动这样的库。