Подскажите, нужно сделать вот такую же анимацию логотипа как на

Question

Подскажите, нужно сделать вот такую же анимацию логотипа как на

видео.
Логотип белый - если меню закрыто и черный - если меню открыто. Смена цвета происъодит анимированно.

У меня два компонента.
Первый - Header. Он содержит в себе логотип и кнопку меню.
Второй - Menu. Написанно полностью все меню. Включая состояние открыто\закрыто.

Правильно ли я понимаю, что мне нужно использовать контекст провайдер в Header чтобы отслеживать состояние (открыто\закрыто меню) чтобы по этому состоянию запускать анимацию смены цвета? Или как это вообще делаеться правильно?

#frontend #javascript #programming #react.js #russian

0

26.10.2023

7 ответов

15 просмотров

Aleksandr Osnach Автор вопроса

Rain
да надо какое-то состояние отслеживать, например в...

Про контест понял. Свойство открыто\закрыто мне нужно будет передавать на уровень выше получается. А что значит “а так вообще класс просто навесить на нужные теги” - это я не понял, что ты имеешо ввиду. Наверно классы на логотип навесить в зависимости из состояния полученного из контекса, да? И эти классы что на логотип навешу, прописать им в css свойства транзишн,

0

26.10.2023

Rain

Aleksandr Osnach
Про контест понял. Свойство открыто\закрыто мне ну...

0

26.10.2023

Aleksandr Osnach Автор вопроса

Rain
<div className={isOpen ? styles.menuOpen : ''}>

Не мне само меню стилизовать не нужно. У меня все уже сделано.Мне чисто логотип нужно таким сделать. как на видео по анимации в зависимоти от того открыто меню или закрыто

0

26.10.2023

Rain

Aleksandr Osnach
Про контест понял. Свойство открыто\закрыто мне ну...

вообще transiton должен быть у базового класса, который постоянно висит на теге иначе при удалении доплнительного класса у тебя вторая часть анимации не сработает, так как транзишна не будет уже

0

26.10.2023

Rain

Aleksandr Osnach
Не мне само меню стилизовать не нужно. У меня все ...

ну это просто для примера на свой логотип просто вешаешь класс с анимацией и изменением цвета

0

26.10.2023

Aleksandr Osnach Автор вопроса

Rain
ну это просто для примера на свой логотип просто ...

Спасибо.Кстати про транзиш полезно. У меня как раз с крестиком проблемы из-за того, что не на базом класе висит. Покопаюсь сейчас в этом тоже

0

26.10.2023

Rain · Accepted Answer

Rain

да надо какое-то состояние отслеживать, например в контексте а так вообще класс просто навесить на нужные теги ну и для тегов transition выставить для нужных свойств

0

26.10.2023

169 похожих чатов

Подскажите, нужно сделать вот такую же анимацию логотипа как на

7 ответов

Похожие вопросы