动画延迟 属性 在 Sass for 循环中不起作用

Question

我正在尝试根据索引延迟一组元素的动画开始时间，以便它们的动画按顺序开始。

由于无法确定的原因，它无法正常工作：

https://jsfiddle.net/ctu7tcru/

我发现：

• 元素选择得很好（注意 background 是如何变化的）

• 跟SVG没关系

• 跟动画无限没关系

看起来，当您尝试在循环中更改 animation-delay 属性 时，它就不起作用了。它在循环外有效，在循环内无效（在任何情况下）。

This答案貌似一模一样，我复制了一下，还是不行。伊恩诺.

Answer 1

@JackHasaKeyboard，这是一个特异性问题。

#prog {
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  .dot {
    animation: pulse 1.6s infinite;
  }
}

@for $i from 1 through 3 {
  #prog .dot:nth-child(#{$i}) {
    animation-delay: $i * 1.6s;
    background: red;
  }
}

将 #prog id 添加到您的循环中，它应该可以工作。

这是你的 jsfiddle.

的叉子