Как плавно закрыть меню?

Question

[Breeze1]

Ребят, ступор небольшой. По клику меню плавно появляется, анимируется opacity. Нужно чтобы оно также плавно исчезало, а не резко обрывалось

https://codepen.io/brezze/pen/gZpypX

Answer 1

[Abdula Magomedov]

visibility: hidden срабатывает первым. Поэтому исчезает. А анимация работает на opacity

Можете на него задержку добавить.

.menu-wrap {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease, visibility 0s linear 1s;
z-index: 100;
}

.menu-wrap.open {
visibility: visible;
opacity: 1;
transition: opacity 1s ease;
}

https://codepen.io/anon/pen/GPJLWQ

Или можете вместо скрытия через visibility: hidden, использовать pointer-events: none;