当给列表增加动画时，为什么 nth-child 特性只作用于前 10 条内容？

发布日期： 2024-10-25 阅读量： 作者： 网络

给列表渲染增加动画，解决 nth-child 特性使用疑虑

在给列表渲染增加动画时，你碰到了一个关于 nth-child 特性的使用问题。具体来说，在加载前 10 条内容时，动画运行正常，依次显现；但在点击"额外增加 10 条"按钮后，动画却不正常了。

问题疑点

你怀疑问题出在 css 代码中，但苦于无法找出需要修改的地方。于是，你向编程社区寻求帮助，期待大佬们的指导。

解决思路

接受你求助的问题后，开发者们仔细分析了你的代码，发现你在使用 nth-child 时可能存在一些概念上的误解。

调整 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; }

# css

上一篇: 从 Mojs 动画库开始：探索形状模块

下一篇: 微信小程序中input输入及动态设置按钮的实现

当给列表增加动画时，为什么 nth-child 特性只作用于前 10 条内容？

随便看看