Jquery 附加项的增量转换延迟

我有一个使用infinite-scroll.js的页面，它在初始加载时加载8.product div，并添加一个.loaded类，然后在单击按钮运行infinite-scroll时再加载一个8.product div，并在每个页面上添加一个.added类

我正在尝试为每个产品添加增量转换延迟。第一个100ms，第二个200ms，第三个300ms等等，但仅在它们添加到DOM时生效。我当前使用的代码为all.product div使用的：nth child添加了一个转换延迟，这意味着在附加附加项时，它们有一个很长的转换延迟。例如，第一个附加项当前使用，即：n:child9，因此具有900ms的长延迟，但我希望转换延迟循环重新开始，即：n-child1 100ms

HTML

JQUERY将类添加到附加项中

像这样的,

.product {
    // Step fade
    @for $i from 0 to 49 {
        &:nth-child(#{$i+1}) { transition-delay: ($i % 8 + 1) * 100ms; }
    }
}

.product:nth-child(1) {
  transition-delay: 100ms;
}
.product:nth-child(2) {
  transition-delay: 200ms;
}
.product:nth-child(3) {
  transition-delay: 300ms;
}
.product:nth-child(4) {
  transition-delay: 400ms;
}
.product:nth-child(5) {
  transition-delay: 500ms;
}
.product:nth-child(6) {
  transition-delay: 600ms;
}
.product:nth-child(7) {
  transition-delay: 700ms;
}
.product:nth-child(8) {
  transition-delay: 800ms;
}
.product:nth-child(9) {
  transition-delay: 100ms;
}
.product:nth-child(10) {
  transition-delay: 200ms;
}
...
.product:nth-child(48) {
  transition-delay: 800ms;
}
.product:nth-child(49) {
  transition-delay: 100ms;
}

会给你带来这样的结果

.product {
    // Step fade
    @for $i from 0 to 49 {
        &:nth-child(#{$i+1}) { transition-delay: ($i % 8 + 1) * 100ms; }
    }
}

.product:nth-child(1) {
  transition-delay: 100ms;
}
.product:nth-child(2) {
  transition-delay: 200ms;
}
.product:nth-child(3) {
  transition-delay: 300ms;
}
.product:nth-child(4) {
  transition-delay: 400ms;
}
.product:nth-child(5) {
  transition-delay: 500ms;
}
.product:nth-child(6) {
  transition-delay: 600ms;
}
.product:nth-child(7) {
  transition-delay: 700ms;
}
.product:nth-child(8) {
  transition-delay: 800ms;
}
.product:nth-child(9) {
  transition-delay: 100ms;
}
.product:nth-child(10) {
  transition-delay: 200ms;
}
...
.product:nth-child(48) {
  transition-delay: 800ms;
}
.product:nth-child(49) {
  transition-delay: 100ms;
}

---

据我所知，SASS还有一个模运算符……嘿@04FS，你能举个例子吗？太好了，谢谢@04FS。这正是我想要的。如果你能分解你的答案来解释发生了什么，这将是非常有用的。模运算符提醒你整数除法，并且可以用来轻松地“钳制”不断增长的计数器，使其重复0到X-1的间隔，X是模运算的第二个操作数。由于第一项不需要0ms，我在模运算后添加了1，并通过修改循环的起始值和第n个子项{$I+1}内的输出对其进行了“计数器更正”

.product:nth-child(1) {
  transition-delay: 100ms;
}
.product:nth-child(2) {
  transition-delay: 200ms;
}
.product:nth-child(3) {
  transition-delay: 300ms;
}
.product:nth-child(4) {
  transition-delay: 400ms;
}
.product:nth-child(5) {
  transition-delay: 500ms;
}
.product:nth-child(6) {
  transition-delay: 600ms;
}
.product:nth-child(7) {
  transition-delay: 700ms;
}
.product:nth-child(8) {
  transition-delay: 800ms;
}
.product:nth-child(9) {
  transition-delay: 100ms;
}
.product:nth-child(10) {
  transition-delay: 200ms;
}
...
.product:nth-child(48) {
  transition-delay: 800ms;
}
.product:nth-child(49) {
  transition-delay: 100ms;
}