给列表渲染增加动画，巧用 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 动画异常如何解决？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2853211.html
