动态列表渲染中 nth-child 的使用：如何在“加载更多”后保持动画效果？

为带动画的列表渲染增加项目时使用 nth-child

加载前十个项目时，列表呈现流畅动画效果。然而，在点击“额外增加十个项目”按钮后，动画出现异常。怀疑是 css 的问题，却无法解决，寻求专业人士的帮助。

问题分析

查看代码发现，使用了以下 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 的语法。"5n" 表示 5 的倍数，即 5、10、15 等。当加载前十个项目时，没有问题。但是，当添加十个项目时，11-20 中的元素不再与上述规则匹配，导致动画失效。

正确的 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" 表示 10 的倍数，即 10、20、30 等。添加该前缀可以解决问题，使动画效果在任何项目数量下都能正常运行。

以上就是动态列表渲染中 nth-child 的使用：如何在“加载更多”后保持动画效果？的详细内容，更多请关注慧达安全导航其它相关文章！