Как предотвратить анимацию при первоначальном рендеринге? ⇐ CSS

[Anonymous]

У меня есть компонент, который имеет динамические имена классов в зависимости от состояния компонента. Исходное состояние компонента меню — 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 устанавливает для него значение false, а когда состояние ложно, onClick устанавливает для него значение true.

Подробнее здесь: https://stackoverflow.com/questions/636 ... ial-render