为带动画的列表渲染增加项目时使用 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 的使用：如何在“加载更多”后保持动画效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630610.html
微信扫一扫 
支付宝扫一扫 
