1

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>

    

2
  • 1
    ¿Podrías añadir los CSS que estás usando? Commented el 16 nov. 2021 a las 9:09
  • Ya lo añadi. Gracias Commented el 16 nov. 2021 a las 10:07

1 respuesta 1

0

De esta forma se puede hacer lo que solicitas; simplemente implementé un onClick en tu HTML donde cada vez que pinchas se llama a dicha función implementada que es la que ejecuta tu código.

Además, puedes pulsar las veces que quieras que realizará la animación y al volver a pulsar de nuevo, volverá a su estado inicial.

const btnMenuTop = document.getElementById('btnMenuBar');
var lines = document.querySelectorAll(".line-menu");
var click = true;

function animacion() {


    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" onClick="animacion()">
       <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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.