Я пытаюсь создать раскрывающийся список-гамбургер с анимацией для каждого пункта меню. К сожалению, у меня проблема с анимацией выхода.
Я не знаю, как мне это реализовать, но происходит следующее: мой основной навигационный компонент - Navbar2 - имеет несколько дочерних элементов класса MenuOption. Я устанавливаю свойство MenuOpened со значением true/false в зависимости от того, открыл ли пользователь меню-гамбургер.
Когда пользователь открывает раскрывающийся список, анимация MenuOption работает хорошо (открытый вариант).
Теперь проблема в том, что пользователь закрывает его - я предполагаю, что происходит повторная визуализация компонента MenuOption, полностью исключающая анимацию выхода (закрытый вариант). вариант).
Как заставить компоненты MenuOption запускать анимацию выхода без повторной визуализации этих компонентов?
Вот код:
const Navbar2 = () => {
const [menuVisible, setMenuVisible] = useState(false);
const variantsMenuDropdown = {
closed: {
height: ["150px", "150px", "0px"],
},
open: {
height: ["0px", "150px"],
},
};
return (
onClick={() => {
setMenuVisible(!menuVisible);
}}
>
setMenuVisible(!menuVisible)}>
setMenuVisible(!menuVisible)}>
setMenuVisible(!menuVisible)}>
);
};
export default Navbar2;
// MenuOption file
import { useState } from "react";
import { motion } from "motion/react";
import { Link } from "react-router-dom";
const MenuOption = ({ linkName, menuOpened, delayAnimation }) => {
const [hovered, setHovered] = useState(false);
const variantsText = {
closed: {
opacity: 0,
x: [-3],
},
open: {
x: [-3, -3, 5],
opacity: 1
}
}
return (
setHovered(true)} onHoverEnd={() => setHovered(false)}>
{linkName}
)
}
export default MenuOption;
Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation
