Sass实现每6个元素重置transition-delay增量的方法

这问题我之前做图片流分页的时候也踩过坑，nth-of-type按全局DOM顺序计数确实会导致分页后的元素延迟直接跳级，完全不符合预期的淡入节奏😤

问题根源 #

你原来的循环是基于全局的nth-of-type索引，第二页第一个元素是第7个，所以延迟是7*0.15s=1.05s，自然没法立即渲染。我们需要让每6个元素为一组，每组内的延迟从0.15s开始重新递增。

解决方案：用取模运算实现分组索引 #

这里可以用SASS的取模运算符%来计算每个元素在组内的位置，有两种写法都能实现需求：

写法1：处理取模为0的情况

@for $i from 1 through 100 {
  .album:nth-of-type(#{$i}) {
    // 第6、12...个元素取模为0，手动转为6，保证组内索引是1-6
    $groupIndex: if($i % 6 == 0, 6, $i % 6);
    transition-delay: $groupIndex * 0.15s;
  }
}

写法2：更简洁的索引转换

通过($i - 1) % 6 + 1直接得到1-6循环的组内索引，不需要额外判断：

@for $i from 1 through 100 {
  .album:nth-of-type(#{$i}) {
    $groupIndex: ($i - 1) % 6 + 1;
    transition-delay: $groupIndex * 0.15s;
  }
}

效果说明 #

不管你加载多少页，每一页的6个元素都会按照0.15s → 0.3s → ... → 0.9s的延迟依次淡入，完全不受全局DOM顺序的影响，刚好匹配你分页加载后立即渲染的需求。

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