For Loop未正确应用nth-child

Question

使用Sass，我正在遍历类animateMe的项目，并使用索引作为乘数来应用动画延迟。

@for $i from 1 through 100 {
  .animateMe:nth-child(#{$i}) {
    animation-delay: .5s * $i;
  }
}

使用Angular，仅当animateMe满足条件时，我才在div上应用ngClass类。

<div id="neededfoodnames" *ngFor="let list of lists; let i = index" [ngClass]="{'animateMe':lists[i-1]?.category != list.category && animate == true}">
.....
</div>

仅当项目的类别不同于上一个项目的类别并且animate设置为true时，才应应用该类。

animate: boolean = true;

这将导致4个具有animateMe类的div。 但是，由于第一个div和第二个div的正确延迟分别为0.5s和1s，而第三个div的错误延迟为3s，因此无法正确应用动画延迟。

第三个div正在获取类animateMe:nth-child(6)，但它应该是animateMe:nth-child(3)。

我该如何纠正？我创建了一个StackBlitz for this issue。

Answer 1

您的lists数组具有不被视为animateMe元素的对象。只有少数元素具有animateMe类。查看此屏幕截图：

此屏幕截图说明了nth-child选择器无法按预期工作的原因。我为您提供了两种解决方案。

解决方案1 ​​

最好的解决方案是清理这些元素。理想情况下，您应该在该特定部分中仅包含animateMe个元素，例如：

<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>

您应该找到一种显示相同UI的方法，但是使用更少的div元素（例如，使用更多样式或仅在animateMe divs下移动元素）。如果由于某种原因无法实现，那么您可以考虑使用解决方案2。

解决方案2

对您来说，另一种（但不是很干净）的解决方案是预处理该数组并存储一个order属性，该属性可以被循环使用。例如：

lists = [{}, {order:1}, {}, {}, {order:2}, {}, {order:3}, {}, {}];

然后您可以遍历数组并添加我们可以与CSS匹配的data-order属性：

<div *ngFor="let list of lists; let i = index" [ngClass]="{'animateMe': list.order && animate}" [attr.data-order]="animate ? list.order : null">
    ...
</div>

如果您的对象中未定义order属性，则不会打印data-order属性。这是输出示例：

<div>...</div>
<div class="animateMe" data-order="1">...</div>
<div>...</div>
<div>...</div>
<div class="animateMe" data-order="2">...</div>
<div>...</div>
<div class="animateMe" data-order="3">...</div>
<div>...</div>
<div>...</div>

最后一步是更改您的SaSS代码以匹配这些元素：

@for $i from 1 through 100 {
    div[data-order="#{$i}"].animateMe {
        animation-delay: .5s * $i;
    }
}