Javascript 如何防止初始渲染时出现动画？

我有一个组件，它具有基于组件状态的动态类名。菜单组件的初始状态为

false

，因此在加载站点时会触发退出动画。我尝试不在初始渲染时播放退出动画，我尝试仅在用户单击菜单时触发动画

@keyframes menuEnter {
    from {
        transform: translateY(-100vh);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes menuExit {
    from {
        transform: translateY(0);
    } 
    to {
        transform: translateY(-100vh);
    }
}

const[showMenu，setShowMenu]=useState（false）

我试图退出退出动画，因为在初始渲染时播放退出动画没有意义

---

状态更改onClick，当状态为

true

onClick将其设置为

false

时，当状态为

false

时，onClick将其设置为

true
javascript正常，需要修复的是CSS。不要使用动画，只需使用过渡，这样在渲染时菜单不会从打开变为关闭

请尝试以下操作：

向菜单id添加过渡：

#菜单{
过渡：0.3s缓解；
}

然后通过在菜单打开和关闭类之间切换来更改此值：

.menuEnter{
变换：translateY（0）；
}
梅努埃希特先生{
变换：translateY（-100vh）；
}

这样，当组件渲染时，菜单不会从一个动画状态切换到另一个动画状态，而是保持关闭状态

PS：考虑使用3D变换的性能原因。
你需要重新考虑条件。只有在菜单打开时，才应添加
menuExit
。还可以在由菜单触发器（悬停，单击任何内容）编辑的“我的问题”触发的事件上添加类。处理这些情况的另一种方法是什么？
const [showMenu, setShowMenu] = useState(false)
<div className={`menuContainer ${showMenu ? `menuEnter` : 'menuExit'}`} id='menu'>