Как правильно настроить анимацию в бургер меню?

Question

[Toy Boy]

https://codepen.io/sdydno/full/xxgYJjz

Когда открывается меню некоторые элементы остаются на время, при закрывании такая же ситуация. Что я делаю не так???

Answer 1

[Aricus]

Эти элементы не перечислены в анимациях, вроде:

.nav__burger.active+.nav__menu li:nth-child(1) {
        transition: all 0.5s 0.85s;
    }

Comments

[Toy Boy]

не понял ответа....

[Aricus]

У вас есть анимации, вроде этой. А проблемные элементы не подпадают под эти селекторы.

[Toy Boy]

.nav__menu .nav__menu_link .nav__menu_social a .nav__menu_icon {
    transition: all .5s .8s;
}

.nav__menu .nav__menu_link a {
    transition: all .5s .8s;
}

.nav__menu .nav__menu_link a::before {
    transition: all .5s .8s;
}

.nav__burger.active + .nav__menu_link .nav__menu_social a .nav__menu_icon {
    transition: all .1s .1s;
}

Я их добавлял, не работает(

[Aricus]

Если это применилось к этим элементам (в консоли браузера), тогда не знаю. Хочу только заметить, что с точки зрения проектирования это очень плохо выглядит. Если в меню добавится ещё один пункт, то значительную часть этого придётся переделать. Лучше создать класс пункта меню, независимо от того, что это за пункт. Поближе к BOM.