3

mi idea es que al iniciar mi pagina se muestren varios elementos por orden con ese transición que tengo en el ejemplo, me parece que es una forma de hacerlo, pero creo que debe haber una forma en la que pueda animar el contenedor y decirle que cada hijo salga y qué el siguiente salga después del otro, es una forma en la que puedo ahorrar código, porque si tengo muchos elementos seria muy tedioso hacer todo eso por cada uno.

.contenedor1, .contenedor2, .contenedor3{
  margin: 40px auto;
  width: 50%;
  background: red;
  height: 30px;
  scale: 0;
}
.contenedor1{
  animation-name: con1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes con1{
  0%{
    scale: 0;
  }
  100%{
    scale: 1;
  }
}
.contenedor2{
  animation-name: con2;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes con2{
  0%{
    scale: 0;
  }
  100%{
    scale: 1;
  }
}
.contenedor3{
  animation-name: con3;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
@keyframes con3{
  0%{
    scale: 0;
  }
  100%{
    scale: 1;
  }
}
<div class="con">
  <div class="contenedor1"></div>
  <div class="contenedor2"></div>
  <div class="contenedor3"></div>
</div>
otros ejemplos serian "un menú principal donde cada opción aparece de forma progresiva al entrar a la pagina", díganme que esta no es la única forma de lograr algo así, le agradecería su ayuda, gracias de antemano

1 respuesta 1

5

La forma que me parece más adecuada para hacer lo que estás buscando, sería utilizar 1 misma clase para agrupar todos tus contenedores, usar document.getElementsByClassName para obtener todos estos contenedores usando Javascript, y asignandoles el parámetro animationDelay por medio de un ciclo.

const classArray = document.getElementsByClassName("contenedor1");

var testDivs = Array.prototype.filter.call(classArray, function(testElement, index){
    testElement.style.animationDelay = `${index+1}s`
});
.contenedor1{
  margin: 40px auto;
  width: 50%;
  background: red;
  height: 30px;
  scale: 0;
}
.contenedor1{
  animation-name: con1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes con1{
  0%{
    scale: 0;
  }
  100%{
    scale: 1;
  }
}
<div class="con">
  <div class="contenedor1"></div>
  <div class="contenedor1"></div>
  <div class="contenedor1"></div>
</div>

Pruébalo agregando la cantidad de contenedor1 que quieras, y me dices cómo te funciona

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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