Я пытаюсь создать раскрывающийся список-гамбургер с анимацией для каждого пункта меню. К сожалению, у меня проблема с анимацией выхода.
Я не знаю, как мне это реализовать, но происходит то, что мой основной компонент навигации - Navbar2 имеет несколько дочерних элементов класса MenuOption. Я отправляю ему реквизиты данных MenuOpened с истинной/ложной погодой, когда пользователь открыл меню-гамбургер.
Теперь проблема в том, что когда пользователь открывает раскрывающийся список, анимация 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
