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

Question

我有一个组件，它具有基于组件状态的动态类名。菜单组件的初始状态是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)
<div className={`menuContainer ${showMenu ? `menuEnter` : 'menuExit'}`} id='menu'>

我试图摆脱退出动画，因为在初始渲染时播放退出动画没有意义。
当状态为 true 时，状态会在单击时更改onClick 将其设置为 false当状态为 false onClick 将其设置为 true .

Answer 1

javascript没问题，需要修复的是CSS。而不是使用动画，只需使用过渡，这样菜单就不会在渲染时从打开变为关闭。
尝试以下操作:
向您的菜单 ID 添加过渡:

#menu {
    transition: 0.3s ease-out;
}

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

 .menuEnter {
    transform: translateY(0);
}

 .menuExit {
    transform: translateY(-100vh);
}

这样，当组件渲染时，菜单不会从一种动画状态转到另一种动画状态，而是保持关闭状态。
PS:出于性能原因考虑使用 3d 变换。