Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Chelovek_01 Ученик (106), открыт 2 недели назад
Проблема такая: мне нужно сделать так, чтобы при нажатии на "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;
}

Если нужен будет код компонента, то я напишу в комментариях, в вопросе уже не помещается
1 ответ
Dmitrii Профи (776) 2 недели назад
напиши код
Chelovek_01Ученик (106) 2 недели назад
Извиняюсь, не знал, что mail.ru довольно жадные на количество строчек в комментариях. Если сильно нужно, могу ли я каким-либо другим способом показать? Может, скриншоты кинуть?
Похожие вопросы