почему меню появляется моментально, а не плавно?
<header>
<div class="container">
<div class="header__content">
<div class="header__logo">
<img src="../dist/img/svg/logo.svg" alt="#">
</div>
<div class="header__nav" id="mobileMenu">
<nav>
<ul>
<li><a href="#">Как это работает?</a></li>
<li><a href="#">Для кого</a></li>
<li><a href="#">Кейсы</a></li>
<li><a href="#">Тарифы</a></li>
<li><a href="#">Безопасность</a></li>
<li class="header___link_mobile"><a href="#">Контакты</a></li>
<li class="header___link_mobile"><button class="header___link_button">Вход</button></li>
</ul>
</nav>
<div class="header__lang">
<a href="#">RU</a>
<a href="#">EN</a>
</div>
<div class="header__button">
<button>Подключиться</button>
</div>
</div>
<div class="header__burger burger" id="burgerButton">
<div class="burger__line"></div>
<div class="burger__line"></div>
</div>
</div>
<!-- <div class="header__nav_mobile">
<nav>
<ul>
<li><a href="#">Как это работает?</a></li>
<li><a href="#">Для кого</a></li>
<li><a href="#">Кейсы</a></li>
<li><a href="#">Тарифы</a></li>
<li><a href="#">Безопасность</a></li>
</ul>
</nav>
</div> -->
</div>
</header>
.header__nav{
display: flex;
nav{
display: none;
transform: translateY(-1000px);
transition: all 1s linear;
}
}
.header__nav_active{
overflow-y: hidden;
nav{
transform: translateY(38px);
transition: all 1s linear;
display: flex;
flex-direction: column;
position: absolute;
left: 0;
height: 90vh;
width: 100%;
background-color: #000;
justify-content: center;
align-items: center;
ul{
padding: 0;
list-style-type: none;
li{
text-align: center;
margin-bottom: 20px;
a{
text-decoration: none;
font-size: 18px;
line-height: 23px;
letter-spacing: 0.96px;
color: #555E68;
}
}
}
}
}