Animation (posiblemente alternar clase) no funciona

Question

May 16, 2018, 02:19 AM

Animation (posiblemente alternar clase) no funciona

Así que estoy haciendo un sitio web donde tengo varios divs que deberían deslizarse desde la derecha, izquierda o arriba cuando el usuario hace clic en un botón específico o elementos de navegación. Sin embargo, ninguno de ellos está funcionando. Ninguno de los divs se deslizará cuando haga clic en el botón que se supone que los hará deslizarse. Estoy usando javascript puro para realizar esas acciones. Hasta ahora, he intentado varias acciones. Primero, pensé que era porque no tenía window.onload, pero después de agregarlo, nada cambió. Entonces pensé que tal vez los enlaces todavía llevaban las acciones predeterminadas, así que traté de agregar e.preventDefault con la esperanza de que ese fuera el problema, tampoco funcionó. Luego descubrí algo extraño que hizo pensar que tal vez es mi computadora la que no está interpretando JavaScript correctamente (pensamiento extraño, lo sé. Pero solo estaba considerando cualquier cosa ya que me estaba quedando sin soluciones). Pero en realidad, resulta que mi computadora o el editor no está leyendo "documento" o ventana en javascript. Dice que ambos no están definidos, lo cual es extraño ya que he vinculado el archivo JavaScript correctamente al final del cuerpo. Así que decidí ejecutarlo en JSFiddle para verificar si realmente era solo mi computadora. Sin embargo, incluso en JSFiddle, los divs aún no se deslizarán cuando haga clic en el botón para que se deslicen.

Me he quedado sin ideas. Como el proyecto que estoy haciendo es grande, extraje la parte de divs que no se deslizan para facilitar las cosas. Se supone que el div que verán se deslizará desde la izquierda cuando hagamos clic en el mismo div.

Aquí está el código html:

<!DOCTYPE>
<html>
  <head>
    <title>Emanuel Inacio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="home-page">
      <div id="nav-bar"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Aquí está el código CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condesed', 'San-serif';
}

#nav-bar {
  width: 50%;
  height: 100vh;
  background-color: #000000;
  transform: translateX(-50%);
  transition: transform 0.5s;
}

.active {
  transform: translateX(50%);
}

Finalmente, esta es la parte de JavaScript:

var nav = document.getElementById("nav-bar");

window.onload = function () {
  nav.addEventListener("click", function () {
    nav.classList.toggle("active");
  });
}

Todos los demás div que no funcionan tienen casi la misma base de código que este. Por lo tanto, decidí publicar solo este div. ¡Gracias por adelantado