如何使用 SCSS/SASS 增加并发 div 的动画延迟答案

【问题标题】：How to use SCSS/SASS to increase animation-delay for concurrent divs如何使用 SCSS/SASS 增加并发 div 的动画延迟
【发布时间】：2013-11-05 21:17:25
【问题描述】：

我正在尝试复制 Windows 8 磁贴的加载动画。似乎每个图块都有一个动画延迟，略高于其前身。正如您在下面看到的那样，我目前通过以低效的方式使用 nth-child 来实现这一点。有谁知道我可以以更有效的方式实现这一目标，以满足任意数量的 div 的需求？

DEMO

.results div:nth-child(1) {
  animation-delay: 0.25s;
}
.results div:nth-child(2) {
  animation-delay: 0.5s;
}
.results div:nth-child(3) {
  animation-delay: 0.75s;
}
.results div:nth-child(4) {
  animation-delay: 1s;
}
.results div:nth-child(5) {
  animation-delay: 1.25s;
}
.results div:nth-child(6) {
  animation-delay: 1.5s;
}
.results div:nth-child(7) {
  animation-delay: 1.75s;
}
.results div:nth-child(8) {
  animation-delay: 2s;
}

【问题讨论】：

由于每个 CSS 预处理器都输出普通的旧 CSS，我认为不可能处理无限数量的元素。另一方面，Javascript...
我认为它可以与知道如何使用 SASS 的人一起 - 看到这个外观并说出序列 thesassway.com/advanced/math-sequences-with-sass / en.wikipedia.org/wiki/Look-and-say_sequence
唯一可行的方法是如果它也可以在 vanilla CSS 中完成。如果您愿意接受必须明确说明有多少元素，我相信您可以做到这一点。点赞，希望你能得到一个好的答案。
可能是混合JS来算出div的个数，然后检查之前的div动画延迟，给那个数字加上一定的时间？

标签： css sass

【解决方案1】：

您可以在 Sass 中使用 for 循环来执行此操作：

@for $i from 1 to 10 {
  .results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}

然后您可以通过将 10 个设置为您需要的任何 div 来为任意数量的 div 执行此操作。

【讨论】：

即使只有10个，10个也可以是20个吗？
codepen.io/2ne/pen/bmvcu - 该解决方案似乎出现语法错误？
限制只是告诉预处理器输出 css 循环的次数。它与html无关。如果你愿意，你可以把它变成 100

【解决方案2】：

@for $i from 1 through 10 {
  .results div:nth-child(#{$i}) {
    -webkit-animation-delay:(#{$i*0.1s}); 
    animation-delay:(#{$i*0.1s}); 
  }
}

更好的解决方案...我测试并且它有效;）

【讨论】：

为什么这是一个更好的解决方案？
似乎 through 包括 10 但 to 排除

【解决方案3】：

我使用这个 mixin：

@mixin delay($rule, $number, $value) {
  @for $i from 1 to ($number + 1) {
    &:nth-child(#{$i}) {
      -webkit-#{$rule}-delay: (#{$i*$value});
      #{$rule}-delay: (#{$i*$value});
    }
  }
}

.results div{
  @include delay(animation, 8, 0.25s);
}

这样你也可以重复使用它的过渡。

【讨论】：