Скорость перехода свертывания навигации Bootstrap 5 ⇐ CSS

[Anonymous]

Я создал навигационную панель с помощью Bootstrap 5 и пытаюсь добиться, чтобы переход свернутого меню во всю высоту составлял 1 секунду. Я также создал анимированный переключатель для активации сворачиваемого меню (см. код). Кажется, что переключатель и раскрывающийся список не синхронизированы. Так что когда я сразу закрываю сворачивающееся меню крестик например не пропадает. Я нигде не могу найти, как изменить переход свертывания!

Код: Выделить всё

[*]








body{
overflow-y: hidden;
}
/***** Nav *****/

/*Navbar*/
.navbar-brand {
font-family: 'Baloo Bhai', cursive;
font-size: 28px;
color:var(--light);
}

.mynav{
position: absolute;
width: 100%;
height: 55px;
top: 0;
height: auto;
border-bottom: none;
z-index: 12;/*navbar over other elements*/
background-color:var(--main);
z-index: 12;/*navbar over other elements*/
}

.mynav ul li a, .mynav .social-links li a{
color: var(--light);
text-align:center;
text-decoration: none!important;
}
.mynav ul li a:hover{
color: var(--litegrey);
}

.mynav .nav-link.active{
color: var(--light);
font-weight: bold;
}

.mynav .dropdown-item {
color: var(--main);
text-align: left;
}
.mynav .dropdown-item:hover {
color: var(--main);
text-align: left;
}

/*Toggler*/
#menu-toggle {
width:50px;
height:50px;
position:relative;
cursor:pointer;
border-radius:5px;
}

.navbar-toggler,.navbar-toggler:focus,.navbar-toggler:active,.navbar-toggler-icon:focus{
border:none!important;
outline: none;
box-shadow: none;
}

#menu-toggle span {
display:block;
--bg-opacity:1;
background-color:var(--white);
background-color:rgba(89,64,148,var(--bg-opacity));
border-radius:2px;
transition:.25s ease-in-out;
-webkit-transition:.25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
-ms-transition:  .25s ease-in-out;
}
#menu-toggle #hamburger {
position:absolute;
height:100%;
width:100%
}
#menu-toggle #hamburger span {
width:30px;
height:4px;
position:relative;
top:12px;
left:10px;
margin:7.5px 0
}
#menu-toggle #hamburger span:first-child {
margin:0;
transition-delay:.5s;
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-o-transition-delay:.5s;
-ms-transition-delay:.5s;
}
#menu-toggle #hamburger span:nth-child(2) {
transition-delay:.625s;
-webkit-transition-delay:.625s;
-moz-transition-delay:.625s;
-o-transition-delay:.625s;
-ms-transition-delay:.625s;
}
#menu-toggle #hamburger span:nth-child(3) {
transition-delay:.75s;
-webkit-transition-delay:.75s;
-moz-transition-delay:.75s;
-o-transition-delay:.75s;
-ms-transition-delay:.75s;
}
#menu-toggle #cross {
position:absolute;
height:100%;
width:100%;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#menu-toggle #cross span:first-child {
height:0;
width:4px;
position:absolute;
top:10%;
left:24px;
transition-delay:0s;
-webkit-transition-delay:.0;
-moz-transition-delay:.0;
-o-transition-delay:.0;
-ms-transition-delay:.0;

}
#menu-toggle #cross span:nth-child(2) {
width:0;
height:4px;
position:absolute;
left:10%;
top:24px;
transition-delay:.25s;
-webkit-transition-delay:.25s;
-moz-transition-delay:.25s;
-o-transition-delay:.25s;
-ms-transition-delay:.25s;
}
#menu-toggle.open #hamburger span {
width:0
}
#menu-toggle.open #hamburger span:first-child {
transition-delay:0s;
-webkit-transition-delay:.0;
-moz-transition-delay:.0;
-o-transition-delay:.0;
-ms-transition-delay:.0;

}
#menu-toggle.open #hamburger span:nth-child(2) {
transition-delay:.125s;
-webkit-transition-delay:.125s;
-moz-transition-delay:.125s;
-o-transition-delay:.125s;
-ms-transition-delay:.125s;
}
#menu-toggle.open #hamburger span:nth-child(3) {
transition-delay:.25s;
-webkit-transition-delay:.25s;
-moz-transition-delay:.25s;
-o-transition-delay:.25s;
-ms-transition-delay:.25s;
}
#menu-toggle.open #cross span:first-child {
height:80%;
transition-delay:.625s;
-webkit-transition-delay:.625s;
-moz-transition-delay:.625s;
-o-transition-delay:.625s;
-ms-transition-delay:.625s;
}
#menu-toggle.open #cross span:nth-child(2) {
width:80%;
transition-delay:.375s;
-webkit-transition-delay:.375s;
-moz-transition-delay:.375s;
-o-transition-delay:.375s;
-ms-transition-delay:.375s;
}

.collapsing {
height: 0;
overflow: hidden;
transition: height 2s ease;
}
.navbar-collapse.show, .navbar-collapse.collapsing {
text-align: center;
font-size: 2rem;
transition: height 2s ease;

}
.navbar-collapse.collapsing {
height: calc(0vh);

}
.navbar-collapse.show {
height: calc(100vh - 56px);
transition: height 2s ease;
}














[url=index.php]Title[/url]
















[list]

[url=index.php]Home[/url]

[*]
[url=porty.php]Portfolio[/url]

[*]
[url=contact.php]Contact[/url]

[/list]








// Nav hamburgler toggler

$(document).ready((function () {
$("#menu-toggle").on("click", (function () {
$(this).toggleClass("open")
}))
}))

У меня возникли проблемы с тем, чтобы свернуть меню закрылось достаточно быстро, когда переключатель выбирается быстро (так быстро открывается, а потом сразу закрывается). Нужен ли мне для этого JavaScript? Или, может быть, изменить библиотеку начальной загрузки? Надеюсь, это имеет смысл.

Подробнее здесь: https://stackoverflow.com/questions/793 ... tion-speed