有没有更好的方法在一段时间后显示内容包装器的每个元素？

Question

我想在一段时间后显示content-wrapper 中的每个 div。
我目前使用el1, el2, el3, ... 类来实现这个目标。但是我的一些content-wrappers 有多个元素，这使得它不那么优雅，因为每个类都必须是独一无二的。有没有更好的方法来实现这一点，例如使用 content-wrapper div 的每个子元素共有的 el 类。

我目前有这个html和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);
} 

欢迎使用 CSS、Javascript 或 JQuery 的解决方案。

Answer 1

只使用纯纯 CSS

所有代码都被注释了。

---

有用的文档：

• CSS variables MDN documentation
• CSS calc() MDN documentation
• CSS forwards animation fill-mode

* {
  /* 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>

Answer 2

您的代码存在一些问题。 首先，您似乎在选择元素，但您没有对它做任何事情。

其次，您的代码中有几个语法错误： 错误使用function 关键字、引用错误变量等

以下是您需要进行的更正：

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]'
}

在您的 html 中，只需将每个元素设置为最初隐藏

<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>