我想知道是否可以仅使用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。
响应的Thx!
答案 0 :(得分:4)
这样可行:
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; }
}
答案 1 :(得分:4)
这是我不推荐的,因为所有供应商扩展都会非常冗长。可以使用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/