为带动画的列表渲染增加项目时使用 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 的使用：如何在“加载更多”后保持动画效果？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
181
收藏
