基于infinite-scroll.js为追加元素设置递增transition-delay的问题

我来帮你解决这个问题！你遇到的核心问题是全局的:nth-child()选择器是基于父元素下所有子元素的位置来计数的，而不是按元素的类来分组计数。所以追加的第9个元素会匹配:nth-child(9)，导致延迟变成900ms，而不是你想要的从100ms重新开始。下面有两种可行的解决方案：

方案一：使用SCSS分组匹配选择器 #

我们可以针对.loaded和.appended类分别设置延迟规则，对.appended元素使用8n + i的公式来实现每8个元素一组循环延迟：

.product {
  // 为初始加载的.loaded元素设置递增延迟
  &.loaded {
    @for $i from 1 through 8 {
      &:nth-child(#{$i}) {
        transition-delay: $i * 100ms;
      }
    }
  }

  // 为追加的.appended元素设置循环递增延迟（每8个一组重置）
  &.appended {
    @for $i from 1 through 8 {
      // 匹配每一组追加元素的第i个（第9/17/25...个元素对应i=1，以此类推）
      &:nth-child(8n + #{$i}) {
        transition-delay: $i * 100ms;
      }
    }
  }
}

原理说明：

• 对于初始的8个.loaded元素，直接用:nth-child(1)到:nth-child(8)匹配它们在父元素中的位置，设置100ms到800ms的延迟。
• 对于追加的.appended元素，8n + i会匹配父元素中第8n+i个元素（n从1开始），这样每追加8个元素，都会从100ms的延迟重新开始循环。

方案二：使用JavaScript动态设置延迟 #

如果未来可能调整每次追加的元素数量，用JS动态设置延迟会更灵活。在无限滚动的append事件中，遍历每个追加的元素，直接为它们设置对应的transition-delay：

$grid.on( 'append.infiniteScroll', function(event, response, path, items) {
  $(items).each(function(index) {
    // index从0开始，所以延迟计算为(index+1)*100ms
    const delayTime = (index + 1) * 100;
    $(this)
      .addClass('appended')
      .css('transition-delay', `${delayTime}ms`);
  });
});

同时，初始加载的.loaded元素也可以用类似的JS方式设置延迟（或者保留原来的SCSS规则）：

// 页面加载完成后为初始产品设置延迟
$(document).ready(function() {
  $('.product.loaded').each(function(index) {
    const delayTime = (index + 1) * 100;
    $(this).css('transition-delay', `${delayTime}ms`);
  });
});

原理说明：

• 在元素被追加到DOM的瞬间，我们直接通过JS为每个元素设置内联样式的transition-delay，完全不受父元素中子元素位置的影响，每次追加的元素都会从100ms开始递增。
• 这种方式不需要依赖CSS的循环生成，更适合动态调整追加数量的场景。

两种方案都能满足你的需求：确保初始元素和每次追加的元素都从100ms开始递增transition-delay，且延迟仅在元素被添加到DOM时生效。

内容的提问来源于stack exchange，提问作者dungey_140