Me gustaría mostrar cada div dentro del content-wrapper después de un tiempo determinado.
Actualmente uso las el1, el2, el3, ... para lograr este objetivo. Pero algunos de mis content-wrappers tienen varios elementos, lo que los hace menos elegantes ya que cada clase tiene que ser única. ¿Hay una mejor manera de lograr esto, por ejemplo, usando la clase el común a cada subelemento del div content-wrapper?
Actualmente tengo este html y js.
<div class="content-wrapper"> <div class="el el1">1</div> <div class="el el2">2</div> <div class="el el3">3</div> </div>JS
function display_elt(elt_class, time){ setTimeout(function(){ document.querySelector(elt_class); }, time) } var time_int = 0; divs = ['elt1', 'elt2', 'elt3']; for (let i = 0; i < divs.length; i++) { time_int += 0.5; function display_elt(divs[i], time_int); }Una solución con CSS, Javascript o JQuery será bienvenida.
simplemente usando CSS puro y simple
Todo el código está comentado.
documentaciones útiles:
calc() Documentación de MDNforwards el modo de relleno de animación * { /* this is a css variable */ --delay: 0.5s; } .el { /* hidden by default */ opacity: 0; /* shorthand -> name duration timing-function fill-mode */ animation: fadeIn 0.5s linear forwards; /* the real trick is here */ animation-delay: calc(var(--delay) * var(--i)); /*el1 -> 0.5s * 0 = 0 */ /*el2 -> 0.5s * 1 = 0.5s */ /*el3 -> 0.5s * 2 = 1s */ } @keyframes fadeIn { from { /* is not visible*/ opacity: 0; } to { /* is visible */ opacity: 1; } } <div class="content-wrapper"> <!-- 0 --> <div style="--i: 0;" class="el el1">1</div> <!-- 1 --> <div style="--i: 1;" class="el el2">2</div> <!-- 2 --> <div style="--i: 2;" class="el el3">3</div> <!-- if more elements, increase the --i css variable for next elements --> </div>Hay un par de cosas mal con su código. Primero, parece que está seleccionando el elemento pero no está haciendo nada con él.
En segundo lugar, tiene varios errores de sintaxis en su código: uso incorrecto de la palabra clave de function , referencia a variable incorrecta, etc.
Estas son las correcciones que debe hacer:
function display_elt(elt_class, time){ setTimeout(function(){ document.querySelector('.'+elt_class).hidden = false; // make the element NOT hidden }, time) } var time_int = 0; var divs = ['el1', 'el2', 'el3']; for (let i = 0; i < divs.length; i++) { // use 'divs.length' (which is 3 not 4) time_int += 0.5; display_elt(divs[i], time_int); // call the function with 'divs[i]' }y en su html, simplemente configure cada elemento para que esté inicialmente oculto
<div class="content-wrapper"> <div class="el el1" hidden>1</div> <div class="el el2" hidden>2</div> <div class="el el3" hidden>3</div> </div>