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

本篇文章给大家分享《动态列表渲染中 nth-child 的使用：如何在“加载更多”后保持动画效果？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

为带动画的列表渲染增加项目时使用 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 的使用：如何在“加载更多”后保持动画效果？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！