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>
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óncontrol
continuamente y en esa función se le quita la clase que se le pone en la funciónmenu
(y que debería lanzar la animación). Por eso nunca se ve la animación, porque en cuanto se pone conmenu
, se quita concontrol
. Así que mi duda es ¿qué hace essetInterval
y por qué lo estás usando? Porque si lo quitas, la animación se ve bien (exceptuando la repetición infinita)setInterval
.