Не отображаются анимации в компоненте

Проблема такая: мне нужно сделать так, чтобы при нажатии на "open navigation" этот блок div'a плавно уходил вверх, а следом сверху появлялся блок с ссылками. ''open navigation" уходит плавно, но вот какие-то проблемы с появлением навбара. Помогите, пожалуйста

Header.css:

 .header { 
    width: 100%; 
    top: 0; 
    left: 0; 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background 0.3s ease; 
    z-index: 1; 
    padding: 10px; 
} 
 
.nav { 
    display: none; 
    opacity: 0; 
    transform: translateY(-20px); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
} 
 
.nav.open { 
    display: block; 
    opacity: 1; 
    transform: translateY(0); 
} 
 
.nav-list { 
    list-style: none; 
    display: flex; 
    margin: 0; 
    padding: 0; 
} 
 
.nav-item { 
    margin: 0 15px; 
    position: relative; 
    margin-bottom: 10px; 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
} 
 
.nav.open .nav-item { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.3s; 
} 
 
.svg-icon { 
    width: 160px; 
    height: 50px; 
    position: relative; 
} 
 
.svg-border { 
    stroke-dasharray: 600; 
    stroke-dashoffset: 600; 
    transition: stroke-dashoffset 0.5s ease; 
} 
 
.nav-item:hover .svg-border { 
    stroke-dashoffset: 0; 
} 
 
.svg-icon rect, 
.svg-icon line { 
    visibility: hidden; 
} 
 
.nav-item:hover .svg-icon rect, 
.nav-item:hover .svg-icon line { 
    visibility: visible; 
} 
 
.nav-toggle { 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    background-color: transparent; 
    padding: 3px; 
    position: absolute; 
    top: -30px; 
    left: 50%; 
    transform: translateX(-50%); 
} 
 
.navigationSvg { 
    width: 230px; 
    height: auto; 
} 
 
svg.navigationSvg:hover path { 
    fill: rgba(218, 218, 218, 0.116); 
} 
 
.nav-toggle-label { 
    margin-right: 5px; 
    font-size: 20px; 
} 
 
.hidden { 
    opacity: 0; 
    transform: translateY(-100px); 
    transition: opacity .55s ease, transform 4.5s ease; 
    pointer-events: none; 
}  

Если нужен будет код компонента, то я напишу в комментариях, в вопросе уже не помещается