0

Estoy haciendo una animación, lo que quiero lograr es que al cambiar la clase de un elemento HTML (la cambio con un evento onclick usando JavaScript a una clase la cual tiene una animación CSS). La cuestión es que sí me cambia la clase pero no ejecuta la animación.

Éste es el código:

function control() {
  var detectarAncho = document.body.scrollWidth;
  detectarHeight = document.body.scrollHeight;
  navegador = document.getElementById("navegadorResponsive");
  if (detectarAncho >= 800) {
    document.getElementById('icono').className = "removeClass";
    document.getElementById('logo').className = "removeClass";
    navegador.className = "removeClass";
  } else if (detectarAncho <= 800) {
    document.getElementById('icono').removeAttribute("class");
    document.getElementById('logo').removeAttribute("class");
    navegador.className = "navResponsive";
  }
}

window.setInterval(control, 0000);

//menu responsive
function menu() {
  var clase = document.getElementById("navegadorResponsive");
  if (clase.className = "navResponsive") {
    clase.className = "abrirResponsive";
  } else {
    clase.className = "navResponsive";
  }
}
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  font-family: Open Sans;
}

/* editado para ver el icono, no estaba en los estilos originales */
#icono {
  width: 50px;
  height: 50px;
  background: red;
}

/* estilos para centrar la web */

body .contenedor {
  margin: 0 auto;
  display: block;
  background: #f9f9f9;
  box-shadow: 0px 0px 1px 0.3px rgba(0, 0, 0, .7);
}

body .contenedor header {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}

body .contenedor header .navegador {
  width: 940px;
  position: relative;
}


/* estilos para posicionar la barra */

body .contenedor header .navegador ul li a {
  list-style: none;
  text-decoration: none;
  color: #242424;
}

body .contenedor header .navegador ul li {
  display: inline-block;
  padding: 1em;
}


/* estilos del buscador */

body .contenedor header .navegador .busqueda form input[type="text"] {
  position: absolute;
  left: 80%;
  top: 20%;
  padding: 0.5em;
  width: 225px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3%;
}

body .contenedor header .navegador .busqueda form input[type="text"]:hover {
  background: #f9f9f9;
  border: 1px solid #f9f9f9;
  transition-duration: .5s;
}

body .contenedor header .navegador .busqueda form input[type="text"]:focus {
  background: #f9f9f9;
}

body .contenedor header .navegador .busqueda form input[type="text"]:not(:hover) {
  transition-duration: .5s;
}


/*  estilos para posicionar el logo */

body .contenedor header .navegador .logo a {
  list-style: none;
  text-decoration: none;
}

body .contenedor header .navegador a h3 {
  color: #F74949;
  position: absolute;
  left: 50%;
  top: 15%;
  font-family: 'Harabara Mais Demo';
  font-size: 35px;
}


/* transitions de los ul del nav */

body .contenedor header .navegador ul li:hover {
  background: #f3f2f1;
  transition-duration: .3s;
}

body .contenedor header .navegador ul li a:hover {
  color: #242424;
  transition-duration: .3s;
}

body .contenedor header .navegador ul li:not(:hover) {
  transition-duration: .7s;
}

body .contenedor header .navegador ul li a:not(:hover) {
  transition-duration: .7s;
}

.removeClass {
  display: none;
}

@media screen and (max-width: 800px) {
  body .contenedor {
    display: none;
  }
  body .responsive {
    position: relative;
    background: #fff;
    box-shadow: 0px 0px 1px 0.3px rgba(0, 0, 0, .7);
    padding: 20px;
  }
  body .responsive #icono a {
    list-style: none;
    text-decoration: none;
  }
  body .responsive #icono span {
    color: #242424;
    font-size: 30px;
    padding-left: 30px;
  }
  body .responsive #logo a {
    list-style: none;
    text-decoration: none;
  }
  body .responsive #logo {
    float: right;
    margin-top: -35px;
  }
  body .responsive #logo a h3 {
    font-size: 35px;
    font-family: 'Harabara Mais Demo';
    color: #F74949;
  }
  body .navResponsive ul li a {
    list-style: none;
    text-decoration: none;
    color: #242424;
  }
  body .navResponsive ul li span {
    color: #fff;
    padding-right: 0.5em;
  }
  body .navResponsive ul li {
    padding: 0.5em;
    box-shadow: 0 0 0px 0.3px rgba(0, 0, 0, .7);
    width: 300px;
    background: #F74949;
    margin-left: -300px;
    text-decoration: none;
    list-style: none;
  }
  body .abrirResponsive ul li {
    animation: fade 2.25s normal;
    -webkit-animation: fade 2.25s normal;
    -moz-animation: fade 2.25s normal;
    -o-animation: fade 2.25s normal;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    padding: 0.5em;
    box-shadow: 0 0 0px 0.3px rgba(0, 0, 0, .7);
    width: 300px;
    background: #F74949;
    margin-left: -300px;
    text-decoration: none;
    list-style: none;
  }
  @keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-moz-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-webkit-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-o-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
}
<div class="responsive" id="responsive">
  <div id="icono"><a href="#" onclick="menu()"><span class="icon-menu"></span></a></div>
  <div id="logo">
    <a href="#">
      <h3>Guardian</h3>
    </a>
  </div>
</div>
<nav class="navResponsive" id="navegadorResponsive">
  <ul>
    <li><a href="#"><span class="icon-home"></span>Home</a></li>
    <li><a href="#"><span class="icon-carpeta"></span>Portafolio</a></li>
    <li><a href="#"><span class="icon-phone"></span>Contacto</a></li>
    <li><a href="#"><span class="icon-acerca"></span>Ayuda</a></li>
  </ul>
</nav>
<script type="text/javascript" src="barra.js"></script>

9
  • campusmvp.es/recursos/post/… (Es un ejemplo de lo q quiero lograr con mi esfuerzo) Commented el 4 jun. 2018 a las 1:06
  • Ya puse el Stack Snippet. Como veras, no me ejecuta la animacion al hacer click en el icono (el icono se ubica del lado izquierdo <<<<<, no se ve porque es una imagen que esta en mi computador) Commented el 4 jun. 2018 a las 3:02
  • Hola @JOSEHERRADA, deberías editar la pregunta para crear un ejemplo mínimo verificable, si no se puede ver el problema, va a ser difícil ayudarte. Si te falta alguna imagen (no hay ninguna en el código compartido ni como imagen ni como fondo) puedes usar sitios como placehold.it o lorempixel.com para poner imágenes de relleno, o si la idea es que se vea, puedes ponerle un fondo de color. La cosa es que se pueda reproducir el problema en la propia pregunta, y siendo un problema de JavaScript/CSS debería poderse hacer. Dime si necesitas ayuda y te echo un cable. Saludos.
    – Alvaro Montoro
    Commented el 4 jun. 2018 a las 3:20
  • Sobre la pregunta: ¿Por qué haces esto: window.setInterval(control, 0000);? Parece un error tipográfico ¿un valor 0 cuando debería ser x0000? La cosa es que eso hará que se llame a la función control continuamente y en esa función se le quita la clase que se le pone en la función menu (y que debería lanzar la animación). Por eso nunca se ve la animación, porque en cuanto se pone con menu, se quita con control. Así que mi duda es ¿qué hace es setInterval y por qué lo estás usando? Porque si lo quitas, la animación se ve bien (exceptuando la repetición infinita)
    – Alvaro Montoro
    Commented el 4 jun. 2018 a las 3:30
  • @KacosPro aunque puede que sea un fallo tipográfico, puedes ponerlo como respuesta (yo llegué a planteármelo porque me han quedado unos comentarios muy largos),.Sería interesante saber el porqué de ese setInterval.
    – Alvaro Montoro
    Commented el 4 jun. 2018 a las 3:36

2 respuestas 2

1

No entiendo muy bien lo que quieres hacer, pero si es un cambio de estado, es mejor que uses una transición para todo. A tu css le falta (por lo menos) lo que añado, con eso, al poner la transición en el id, que se mantiene siempre, hay un estado base del que partir para animar. Como cambiabas totalmente el nombre de clase (en vez de añadir una clase con el estado) no dabas un origen y un destino para la transición. Te pongo un ejemplo añadiendo la transición en el id a tu CSS y comentando algunas cosas en tu código como los margin-left que sobraban. Habria que pegarle una limpieza al código....:

PD: Como te han comentado, no tiene sentido que apliques la clase según el ancho por JS, es mucho mejor que lo hagas por css con un media query, funciona mas rápido y liberas al motor de JS de esa faena.

function menu() {
  var clase = document.getElementById("navegadorResponsive");
  if (clase.className === "navResponsive") {
    clase.className = "abrirResponsive";
  } else {
    clase.className = "navResponsive";
  }
}
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  font-family: Open Sans;
}


/* estilos para centrar la web */

body .contenedor {
  margin: 0 auto;
  display: block;
  background: #f9f9f9;
  box-shadow: 0px 0px 1px 0.3px rgba(0, 0, 0, .7);
}

body .contenedor header {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}

body .contenedor header .navegador {
  width: 940px;
  position: relative;
}


/* estilos para posicionar la barra */

body .contenedor header .navegador ul li a {
  list-style: none;
  text-decoration: none;
  color: #242424;
}

body .contenedor header .navegador ul li {
  display: inline-block;
  padding: 1em;
}


/* estilos del buscador */

body .contenedor header .navegador .busqueda form input[type="text"] {
  position: absolute;
  left: 80%;
  top: 20%;
  padding: 0.5em;
  width: 225px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3%;
}

body .contenedor header .navegador .busqueda form input[type="text"]:hover {
  background: #f9f9f9;
  border: 1px solid #f9f9f9;
  transition-duration: .5s;
}

body .contenedor header .navegador .busqueda form input[type="text"]:not(:hover) {
  transition-duration: .5s
}

body .contenedor header .navegador .busqueda form input[type="text"]:focus {
  background: #f9f9f9;
}

body .contenedor header .navegador .busqueda form input[type="text"]:not(:hover) {
  transition-duration: .5s;
}


/*  estilos para posicionar el logo */

body .contenedor header .navegador .logo a {
  list-style: none;
  text-decoration: none;
}

body .contenedor header .navegador a h3 {
  color: #F74949;
  position: absolute;
  left: 50%;
  top: 15%;
  font-family: 'Harabara Mais Demo';
  font-size: 35px;
}


/* transitions de los ul del nav */

body .contenedor header .navegador ul li:hover {
  background: #f3f2f1;
  transition-duration: .3s;
}

body .contenedor header .navegador ul li a:hover {
  color: #242424;
  transition-duration: .3s;
}

body .contenedor header .navegador ul li:not(:hover) {
  transition-duration: .7s;
}

body .contenedor header .navegador ul li a:not(:hover) {
  transition-duration: .7s;
}

.removeClass {
  display: none;
}

@media screen and (max-width: 800px) {
  body .contenedor {
    display: none;
  }
  body .responsive {
    position: relative;
    background: #fff;
    box-shadow: 0px 0px 1px 0.3px rgba(0, 0, 0, .7);
    padding: 20px;
  }
  body .responsive #icono a {
    list-style: none;
    text-decoration: none;
  }
  body .responsive #icono span {
    color: #242424;
    font-size: 30px;
    padding-left: 30px;
  }
  body .responsive #logo a {
    list-style: none;
    text-decoration: none;
  }
  body .responsive #logo {
    float: right;
    margin-top: -35px;
  }
  body .responsive #logo a h3 {
    font-size: 35px;
    font-family: 'Harabara Mais Demo';
    color: #F74949;
  }
  body .navResponsive ul li a {
    list-style: none;
    text-decoration: none;
    color: #242424;
  }
  body .navResponsive ul li span {
    color: #fff;
    padding-right: 0.5em;
  }
  body .navResponsive ul li {
    padding: 0.5em;
    box-shadow: 0 0 0px 0.3px rgba(0, 0, 0, .7);
    width: 300px;
    background: #F74949;
  /*  margin-left: -300px;*/
    text-decoration: none;
    list-style: none;
  }
  body .abrirResponsive ul li {
   /* animation: fade 2.25s normal;
    -webkit-animation: fade 2.25s normal;
    -moz-animation: fade 2.25s normal;
    -o-animation: fade 2.25s normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;*/
    padding: 0.5em;
    box-shadow: 0 0 0px 0.3px rgba(0, 0, 0, .7);
    width: 300px;
    background: #F74949;
   /* margin-left: -300px;*/
    text-decoration: none;
    list-style: none;
  }
  @keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-moz-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-webkit-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
  @-o-keyframes fade {
    0% {
      margin-left: -300px;
    }
    100% {
      margin-left: 0px;
    }
  }
}
#navegadorResponsive{
    transition:all 0.4s ease-in-out;
    opacity:0;
    margin-left: -300px;
}
#navegadorResponsive.abrirResponsive{
    margin-left: 0px;
    opacity:1
}
<div class="responsive" id="responsive">
  <div id="icono"><a href="#" onclick="menu()">Abrir menú</a></div>
  <div id="logo">
    <a href="#">
      <h3>Guardian</h3>
    </a>
  </div>
</div>
<nav class="navResponsive" id="navegadorResponsive">
  <ul>
    <li><a href="#"><span class="icon-home"></span>Home</a></li>
    <li><a href="#"><span class="icon-carpeta"></span>Portafolio</a></li>
    <li><a href="#"><span class="icon-phone"></span>Contacto</a></li>
    <li><a href="#"><span class="icon-acerca"></span>Ayuda</a></li>
  </ul>
</nav>

1

ya encontré la solución. Bueno esta es la solucion en el JavaScript (despues de todas las modificaciones en CSS, no hay error en la animacion o transitions)

function menu(){

var clase = document.getElementById("navegadorResponsive");
if(!clase.hasAttribute("class")){

     clase.className = "navResponsive";
} else{

     clase.removeAttribute("class");
}

}

HTML

        <div class="responsive" id="responsive">
        <div id="icono"><a href="#" onclick="menu()"><span class="icon-menu"></span></a></div>
        <div id="logo">
            <a href="#"><h3>Guardian</h3></a>
        </div>
    </div>
    <nav id="navegadorResponsive"> <!-- removi la clase -->
            <ul>
                <li><a href="#"><span class="icon-home"></span>Home</a></li>
                <li><a href="#"><span class="icon-carpeta"></span>Portafolio</a></li>
                <li><a href="#"><span class="icon-phone"></span>Contacto</a></li>
                <li><a href="#"><span class="icon-acerca"></span>Ayuda</a></li>
            </ul>
        </nav>

Lo que hice practicamente fue quitarle la class que tenia antes el nav

<nav class="navResponsive" id="navegadorResponsive">

a

<nav id="navegadorResponsive">

y con Javascript pregunte si existia el atributo class en el elemento nav, el cual al refrescar la pagina siempre sera false, por lo tanto al ser false le agrego la clase

clase.className = "navResponsive";

en caso contrario le quito la clase.

Bueno, esa es la solucion (me funciona)

1
  • gracias por compartirla y hacer crecer la comunidad ..!! Commented el 4 jun. 2018 a las 20:30

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.