给列表渲染增加动画,但对nth-child的使用有疑问

Question

这个是例子
https://codepen.io/sin911/pen...
现在遇到的问题是,加载前10条时,动画正常,依次显现,但是点击"额外增加10条"按钮后,动画就不正常了,我怀疑是css的问题,但是想不出该怎么改,求大佬们帮忙

Answer 1

  .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;} 

改到更少，你会发现5条的时候就显示异常了？所以问题就是你的样式和个数没关系？

他这里是 5n 是指 5的倍数。。5 、 10 、15
8是指8的倍数，8、16

---

开个会忘给你了。

  .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， 处理加法正好是你想要的。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。