jquery - 附加元素的增量转换延迟

Question

我有一个使用 infinite-scroll.js 的页面，它在初始加载时加载 8 个 .product div(并添加一个 .loaded 类)，然后再加载一个8 .product 单击按钮运行无限滚动时的 div(为每个添加一个 .appended 类)。

我正在尝试为每个 .product 添加增量 transition-delay(第一个 100ms，第二个 200ms，第三个 300ms 等等)，但仅作为以及何时将它们添加到 DOM。我当前使用的代码向所有使用 :nth-child() 的 .product div 添加了一个 transition-delay，这意味着当附加额外的元素，他们有一个很长的transition-delay。例如，当前使用的第一个附加项 :nth:child(9) (因此有 900 毫秒的长延迟)，但我希望转换延迟循环重新开始，即 :nth-child(1)(100 毫秒)。

HTML

<div class="product loaded">Product 1</div>
<div class="product loaded">Product 2</div>
<div class="product loaded">Product 3</div>
<div class="product loaded">Product 4</div>
<div class="product loaded">Product 5</div>
<div class="product loaded">Product 6</div>
<div class="product loaded">Product 7</div>
<div class="product loaded">Product 8</div>

<!-- Appended upon running of infinite-scroll.js -->
<div class="product appended">Product 9</div>
<div class="product appended">Product 10</div>
<div class="product appended">Product 11</div>
<div class="product appended">Product 12</div>
<div class="product appended">Product 13</div>
<div class="product appended">Product 14</div>
<div class="product appended">Product 15</div>
<div class="product appended">Product 16</div>

SCSS

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

JQUERY(向附加项添加类)

// Add class to appended items to enable step fade
$grid.on( 'append.infiniteScroll', function(event, response, path, items) {
     $(items).delay(10).queue(function() {
        $(this).addClass('appended');
     });
});

Answer 1

像这样，

.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;
}