CSS过渡 - 消失并再次出现

Question

我正在尝试创建响应式菜单

1) 大屏显示顶部导航

2) 小屏幕变成画布外菜单

我正在使用 flex box，我可以使用 React + CSS 大致实现我想要的效果

我可以切换菜单和主容器以继续切换 但是我的切换按钮表现得很奇怪，它可以过渡出去，但是当切换为 false 时，它​​会在出现在正确位置之前消失一点

我已将我的代码放在沙盒上 https://codesandbox.io/s/festive-tree-nx4gm?file=/src/App.js

Answer 1

像改变你的CSS一样

@media (max-width: 768px) {
 .navbar {
    display: flex;
    flex-direction: column;
    width: 0;
    height: 100vh;
    position: fixed;
    transition: 0.5s;
    opacity: 0;
    padding: 0;
 }
 .navbar.show {
    width: 250px;
    opacity: 1;
 }
}