CSS动画与列表渲染：巧用nth-child选择器解决动画失效难题
在动态列表渲染中，为提升用户体验，我们常常需要添加CSS动画。然而，使用nth-child选择器时，可能会遇到动画在新增列表项后失效的问题。本文将通过一个案例分析，讲解如何正确使用nth-child选择器实现列表项的逐个出现动画，并解决动画失效的难题。
问题：动画失效的困扰
假设我们希望列表中的每个元素都以一定的延时依次出现。初始加载10个列表项时，动画效果正常。但点击“添加10个”按钮后，动画效果却出现异常，不再按预期顺序显示。
错误代码及分析：
用户最初的CSS代码如下：
.cool:nth-child(1n){transition-delay:0s;}
.cool:nth-child(2n){transition-delay:0.1s;}
.cool:nth-child(3n){transition-delay:0.2s;}
.cool:nth-child(4n){transition-delay:0.3s;}
.cool:nth-child(5n){transition-delay:0.4s;}
问题在于，nth-child(n) 选择器匹配的是所有元素的第n个倍数。例如，nth-child(5n) 将匹配第5个、第10个、第15个元素，而不是前五个元素。当列表项数量超过5个时，新添加的元素会受到该选择器的影响，导致动画错乱。
解决方案：精确控制动画延迟
为了解决这个问题，我们需要使用更精确的选择器，例如 nth-child(an+b)。 假设我们希望每10个元素为一个动画周期，则可以修改CSS代码如下：
.cool:nth-child(10n+1){transition-delay:0s;}
.cool:nth-child(10n+2){transition-delay:0.1s;}
.cool:nth-child(10n+3){transition-delay:0.2s;}
.cool:nth-child(10n+4){transition-delay:0.3s;}
.cool:nth-child(10n+5){transition-delay:0.4s;}
.cool:nth-child(10n+6){transition-delay:0.5s;}
.cool:nth-child(10n+7){transition-delay:0.6s;}
.cool:nth-child(10n+8){transition-delay:0.7s;}
.cool:nth-child(10n+9){transition-delay:0.8s;}
.cool:nth-child(10n+10){transition-delay:0.9s;}
10n+b 的形式中，10n 表示10的倍数，+b 表示在这个倍数的基础上加上从1到10的偏移量。这样，即使增加新的列表项，动画效果也能保持一致性，每个新增的元素都会根据其在列表中的位置获得正确的动画延迟。
