Question

我有一个使用infinite-scroll.js的页面，该页面在初始加载时加载8 .product格（并添加.loaded类），然后在其上再加载8 .product格单击一个按钮即可运行无限滚动（向每个滚动框添加一个.appended类）。

我正在尝试向每个transition-delay添加增量.product（前100毫秒，后200毫秒，后300毫秒等等），但是仅在将它们添加到DOM时才生效。我当前使用的代码向使用transition-delay的所有.product div中添加了:nth-child()，这意味着在附加其他项目时，它们会有一个长的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;
}

附加项目的增量过渡延迟

1 个答案: