Tengo un botón a lo alto de mi página de la clase class="menu-bar"
, es el típico botón de menú de tres líneas y lo he creado completamente desde html. A ese botón le di unas animaciones mediante CSS y ahora quiero que al hacerle click se ejecute la animación y cuando le vuelva hacer click de nuevo el botón vuelva a su estado de nuevo. A cada una de las líneas le di una animación en particular y al hacer click mediante JS le agrego la clase que tiene las animaciones top
,middle
, bottom
a cada uno de los div
.
Mi problema esta en que al hacer click las clases se añaden correctamente, pero, cuando vuelvo hacer click con la intención de quitar las clases que tienen las animaciones y dejar a mi botón en su estado inicial ya no funciona.
const btnMenuTop = document.getElementById('btnMenuBar');
var lines = document.querySelectorAll(".line-menu");
var click = true;
if(click){
btnMenuTop.addEventListener('click', ()=>{
lines.forEach((cadaLi,i)=>{
if(i===0){
lines[i].classList.add('top');
}
if(i===1){
lines[i].classList.add("middle");
}
if(i===2){
lines[i].classList.add("bottom");
}
})
});
click = false;
}else if(click == false){
btnMenuTop.addEventListener('click', ()=>{
lines.forEach((cadaLi,i)=>{
if(i===0){
lines[i].classList.remove('top');
}
if(i===1){
lines[i].classList.remove("middle");
}
if(i===2){
lines[i].classList.remove("bottom");
}
})
click = true;
});
}
/*CSS*/
.menu_bar{
position: absolute;
left: 9px;
top: 3%;
width: 100px;
height: 25px;
z-index: 999;
}
.line-menu{
width: 40px;
height: 2.4px;
background-color: #fff;
}
.line1{
position: absolute;
top: 0%;
}
.line2{
position: absolute;
top: 50%;
}
.line3{
position: absolute;
top: 100%;
}
.top{
left: 0px;
width: 40px;
height: 2.4px;
background-color: #fff;
animation-name: lineTop;
animation-timing-function: linear;
animation-duration: .8s;
animation-fill-mode: forwards;
}
.middle{
top: 50%;
background-color: #fff;
animation-name: lineMiddle;
animation-duration: .8s;
animation-fill-mode: forwards;
opacity: 1;
}
.bottom{
top: 100%;
background-color: #fff;
animation-name: lineBottom;
animation-duration: .8s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes lineTop {
0%{
transform: rotateZ(0deg);
top: 50%;
}
100%{
top: 70%;
transform: rotateZ(-45deg);
}
}
@keyframes lineMiddle {
0%{
top: 50%;
}
100%{
transform: rotateY(90deg);
top: 70%;
}
}
@keyframes lineBottom {
0%{
transform: rotateZ(0deg);
top: 100%;
}
100%{
top: 70%;
transform: rotateZ(45deg);
}
}
<div class="menu_bar" id="btnMenuBar">
<div class="line-menu line1 ">Line 1</div>
<div class="line-menu line2 ">Line 2</div>
<div class="line-menu line3 ">Line 3</div>
</div>