Инкрементная задержка перехода для добавленных элементов

Question

У меня есть страница, использующая infinite-scroll.js, которая загружает 8 .product div при начальной загрузке (и добавляет класс .loaded), а затем еще один 8 .product div при нажатии кнопки для запуска бесконечного-scroll (который добавляет класс .appended к каждому).

Я пытаюсь добавить добавочный transition-delay к каждому .product (первые 100 мс, вторые 200 мс, третьи 300 мс и т. д.), новступают в силу только тогда, когда они добавлены в DOM.Код, который я сейчас использую, добавляет transition-delay ко всем .product div'ам, использующим :nth-child(), что означает, что при добавлении дополнительных элементов они имеют длинный 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;
}