nth-child 动画异常如何解决？

给列表渲染增加动画，巧用 nth-child 逐个呈现

在给列表元素渲染动画时，使用 nth-child 可以逐个呈现元素，但有时候可能遇到动画异常的问题。以一个 codepen 示例为例，当点击加载额外元素时，动画效果不再正常。

检查 css 样式后，发现问题出在 nth-child 选择器的用法上。为了让元素逐个出现，之前使用的样式如下：

.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;} 

但是，5n 意味着 5 的倍数，即 5、10、15。如果加载更多元素，超过 5 条，样式将不再适用。

修改后的样式如下：

.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 意味着 10 的倍数，即 10、20、30。这种处理方式可以解决逐个呈现元素的问题，确保无论加载多少元素，动画都能正常进行。

希望这个解决方案能够帮助你解决列表渲染动画异常的问题。

以上就是nth-child 动画异常如何解决？的详细内容，更多请关注其它相关文章！