1

Buen dia, estoy trabajando con html,css y js, estoy tratando de animar la trancision entre un componente y otro, estoy ocultando y mostrando los ids con esto: document.getElementById("home").style.display = "none"; document.getElementById("root").style.display = "block"; y al hacer click a una funcion parecida a esto:

function bienvenida() {
  document.getElementById("home").style.display = "none";
  document.getElementById("bienvenida").style.display ="block";
}
este es mi codigo para oculta los "componentes" con el id especificado, ahora mi pregunta ¿puedo hacer una animacion de transicion entre ids? que al hacer click oculte el componente con id=home muestre una animacion y luego muestre el componente con id=bienvenida.sin el uso de alguna libreria o framework?

1 respuesta 1

1

Puedes hacerlo mediante animaciones CSS. Esa animación se la asignas a una clase y con Javascript añades o quitas esas clases según tus necesidades.

function mostrar (color) {
  let verde = document.getElementById('verde');
  let azul = document.getElementById('azul');

  switch (color) {
    case 'verde':
      verde.classList.remove("ocultar");
      verde.classList.add("mostrar");
      azul.classList.add("ocultar");
      break;
    case 'azul':
      azul.classList.remove("ocultar");
      azul.classList.add("mostrar");
      verde.classList.add("ocultar");
      break;
  }
}
#contenedor {
  display: flex;
  align-items: center;
}

#verde {
  width: 200px;
  height: 200px;
  background-color: green;
}

#azul {
  width: 200px;
  height: 200px;
  background-color: blue;
  opacity: 0;
}

button {
  height: 50px;
  cursor: pointer;
}

.mostrar {
  animation: fadein 2s;
  animation-fill-mode: forwards;
}

.ocultar {
  animation: fadeout 2s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
<div id="contenedor">
  <div id="verde">

  </div>

  <div id="azul">

  </div>
  
  <button onclick="mostrar('verde')">Mostrar verde</button>
  <button onclick="mostrar('azul')">Mostrar azul</button>
</div>

1
  • Muchas gracias fue de mucha ayuda! Commented el 30 abr. 2020 a las 16:56

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.