顺序 CSS3 动画答案

【问题标题】：Sequential CSS3 animation顺序 CSS3 动画
【发布时间】：2015-02-07 17:56:20
【问题描述】：

我想知道是否可以仅使用 CSS3 顺序淡入项目列表？

HTML 应该是这样的：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>

    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>

    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
</ul>

当 UL 获得“淡出”类时，如果第一个“item1”在完成后淡出（在 2 秒内）淡出下一个（“item2”），依此类推，直到所有项目都消失。淡出。

我知道如何使用 jQuery 来做到这一点，但如果仅使用 CSS3 就可以了？有什么想法可以吗？

编辑：我真的在寻找一种解决方案，当您不知道列表中有多少项目时也可以使用。可能是 1 可能是 100？

编辑：显然，仅使用 CSS 是不可能为可变数量的元素进行此操作的，因此最好的 CSS 解决方案是针对固定数量的项目。否则你将不得不使用 JS。

感谢您的回复！

【问题讨论】：

标签： animation css sequential

【解决方案1】：

这会起作用：

HTML：

<ul class="fadeout">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

CSS：

ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
ul.fadeout li:nth-child(2){
    -webkit-animation: fadeOut 2s linear 2s forwards;
}
ul.fadeout li:nth-child(3){
    -webkit-animation: fadeOut 2s linear 4s forwards;
}
ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

http://jsfiddle.net/fGAZr/

【讨论】：

把代码和链接放在这里会更好。这也是使用 webkit，所以在 FF8 中不起作用......
不是一个挖掘，只是一个建议和评论，您可能想要添加它是一个 chrome/safari 解决方案。 :)
是的，这行得通，但我真的在寻找不涉及固定数量项目的解决方案。如果我将 2 个项目添加到列表中，它们将不会被动画化，我可能应该稍微指定问题（编辑问题）

【解决方案2】：

我不建议这样做，因为所有供应商扩展都会变得非常冗长。可以用 scss 自动生成代码，但我不会打扰。

ul li { transition: opacity 200ms linear;}
ul.fadeout li {opacity: 0;}

ul.fadeout li:nth-child(1)  { transition-delay: 0    }
ul.fadeout li:nth-child(2)  { transition-delay: 0.1s }
ul.fadeout li:nth-child(3)  { transition-delay: 0.2s }
ul.fadeout li:nth-child(4)  { transition-delay: 0.3s }
ul.fadeout li:nth-child(5)  { transition-delay: 0.4s }
ul.fadeout li:nth-child(6)  { transition-delay: 0.5s }
ul.fadeout li:nth-child(7)  { transition-delay: 0.6s }
ul.fadeout li:nth-child(8)  { transition-delay: 0.7s }
ul.fadeout li:nth-child(9)  { transition-delay: 0.8s }
ul.fadeout li:nth-child(10) { transition-delay: 0.9s }
ul.fadeout li:nth-child(11) { transition-delay: 1s   }
ul.fadeout li:nth-child(12) { transition-delay: 1.1s }
ul.fadeout li:nth-child(13) { transition-delay: 1.2s }
ul.fadeout li:nth-child(14) { transition-delay: 1.3s }
ul.fadeout li:nth-child(15) { transition-delay: 1.4s }

您可以在此处查看仅限 webkit 的示例：http://jsfiddle.net/kUQj7/

【讨论】：

是的，这行得通，但我真的在寻找不涉及固定数量项目的解决方案。如果我将 2 个项目添加到列表中，它们将不会被动画化，我稍微指定了我的问题。
那太糟糕了，不过会很酷，它可以完全替换 jquery 代码，但我将不得不使用 javascript。不过感谢您的回答
将该样式转换为$(object) 并根据您的$('selector').length 将其克隆n 次。