Здравствуйте уважаемые:) Не могу понять ситуацию, помогите разобраться, буду весьма признателен:pardon:
Есть вот такой вот код:
класс .open добавляется при нажатии на батон так:
Проблема собственно в том, что все бы ничего, но анимация проигрывается в одном направлении, то-есть при нажатии на кнопку все плавно и вообще ок, но когда нажимаешь на кнопку еще раз "то-есть выключаешь класс .open" все пропадает без анимации, ну собственно как-то так, все везде облазил и ничего не могу найти...
transition-ны добавлял куда только можно, не помогает...
Кому не лень разобраться в моем коде, помогите пожалуйста:)
Есть вот такой вот код:
:
.block_left ul{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
position: fixed;
visibility: hidden;
overflow: hidden;
height: 0%;
opacity: 0;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0, 0.8);
transition: opacity .5s, visibility .35s, height .0s, width .0s;
}
.block_left.open ul{
opacity: 1;
visibility: visible;
height: 100%;
}
.block_left.open ul li{
display: flex;
position: relative;
justify-content: center;
animation: fadeInRight .5s ease forwards;
top: -10%;
opacity: 0;
}
.block_left.open ul li:nth-of-type(1){
animation-delay: .15s;
}
.block_left.open ul li:nth-of-type(2) {
animation-delay: .20s;
}
.block_left.open ul li:nth-of-type(3) {
animation-delay: .25s;
}
.block_left.open ul li:nth-of-type(4){
animation-delay: .30s;
}
.block_left.open ul li:nth-of-type(5){
animation-delay: .35s;
}
.block_left.open ul li:nth-of-type(6) {
animation-delay: .40s;
}
.block_left ul li a{
margin-bottom: 25px;
position: relative;
font-size: 25px;
font-weight: 600;
line-height: 35px;
top: -50px;
margin-right: 0;
}:
$(".block_left").toggleClass("open");
event.preventDefault();transition-ны добавлял куда только можно, не помогает...
Кому не лень разобраться в моем коде, помогите пожалуйста:)