Incremental transition-delay for appended items

问题

I have a page using infinite-scroll.js, which loads 8 .product div on initial load (and adds a .loaded class), and then a further 8 .product div upon clicking a button to run infinite-scroll (which adds an .appended class to each).

I am trying to add incremental transition-delay to each .product (first 100ms, second 200ms, third 300ms and so on), but to only take effect as and when they are added to the DOM. The code I'm currently using adds a transition-delay to all .product div's using :nth-child(), which means that when appending the additional items, they have a long transition-delay. For example, the first appended item currently uses i.e :nth:child(9) (so has a long delay of 900ms), but I want the transition-delay loop to start over, i.e :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 (Adds class to appended items)

// 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');
     });
});

回答1:

Something like this,

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

will get you a result looking like this,

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

来源：https://stackoverflow.com/questions/54437903/incremental-transition-delay-for-appended-items

标签

jquery

css

Sass