附加项目的增量过渡延迟

Question

我有使用无限scroll.js一个页面，它加载8 .product格上的初始载荷（并增加了一个.loaded类），然后进一步8 .product在点击按钮来运行无限滚动（其增加了一个格.appended类）。

我正在尝试为每个.product （前100毫秒，第二个200毫秒，第三个300毫秒等）添加增量transition-delay ，但是仅在将它们添加到DOM时才生效。 我当前正在使用的代码使用:nth-child()向所有.product div添加一个transition-delay ，这意味着在附加其他项目时，它们具有较长的transition-delay 。 例如，第一个附加项当前使用即:nth:child(9) （因此具有900ms的长时间延迟），但是我希望过渡延迟循环重新开始，即:nth-child(1) （100ms） 。

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