具有延迟的交错顺序动画

Question

我有 5 个空白框，我希望它们每 1 秒按顺序填满。我该怎么做呢？我的 JS 错误，无法正常工作。

let blankSquare = document.querySelectorAll(".square");

function fillUp() {
  setInterval(() => {
    blankSquare.classList.add(".fill")
  }, 1000)
}


blankSquare.addEventListener("fillUp");

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Answer 1

使用 CSS 的交错动画

这是一个示例，您不一定需要 JavaScript，而只是一个包含 CSS var（变量）的 style 属性，例如 style="--anim=N" where N 是从0 到N 的索引，animation-delay 属性使用 CSS calc()：

.square {
  height: 3vh;
  aspect-ratio: 1;
  border: solid 2px grey;
  animation: fill 0.3s calc(var(--anim) * 1s) forwards;
}

@keyframes fill {
  to { background: grey; }
}

<div class="squares">
  <div class="square" style="--anim:0"></div>
  <div class="square" style="--anim:1"></div>
  <div class="square" style="--anim:2"></div>
  <div class="square" style="--anim:3"></div>
  <div class="square" style="--anim:4"></div>
</div>

如果您不想手动硬编码style 属性，只需添加此 JS：

const ELS = (sel, el) => (el || document).querySelectorAll(sel);
ELS(".square").forEach((el, i) => el.style.setProperty("--anim", i));

使用 JavaScript 的交错动画

给定一个 JavaScript 函数，您可以使用它来决定何时开始交错动画：

在递归中使用setTimeout而不是setInterval fillUp 函数接受参数 1：元素集合，2：起始索引。
每次下一个递归函数调用都会传递一个递增的索引

const fillUp = (els, i = 0) => {
  els[i].classList.add("fill");
  i += 1;
  if (i < els.length) setTimeout(() => fillUp(els, i), 1000);
};

fillUp(document.querySelectorAll(".square"));

.square {
  height: 3vh;
  aspect-ratio: 1;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

相关文章/资源：

• CSS Custom Properties Variables
• CSS var()
• CSS calc()
• Approach to Staggered animations CSS-Tricks

Answer 2

您可以将项目的索引存储在变量中，并在区间内递增。

let blankSquare = document.querySelectorAll(".square");

let index = 0;

function fillUp() {
  setInterval(() => {
    blankSquare[index++].classList.add("fill")
  }, 1000)
}


fillUp()

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>

</div>