2011-12-21 170 views
2

我想知道是否有可能淡入僅使用CSS3的項目列表?連續的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變一次,這是完成了類「淡出」這將是冷靜,如果第一個「物品1」淡出(在2秒)淡出下一個(「item2」)等等,直到所有項目都淡出爲止。

我知道如何做到這一點使用jQuery,但它會很好,如果這可能只使用CSS3?任何想法,如果這可能是可能的?

編輯:我真的很想找一個解決方案,當你不知道列表中有多少項目時也可以使用。它可能是1它可能是100?

EDIT:顯然,使用CSS的可變數量的元素是不可能的,所以最好的CSS解決方案是固定數量的項目。否則,你將不得不使用JS。

Thx爲答覆!

回答

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

http://jsfiddle.net/fGAZr/

+0

這裏把代碼的鏈接會更好。此外,這是使用WebKit,所以不能在FF8 ... – Skuld 2011-12-21 14:16:05

+0

抱歉打擾你! – Jonas 2011-12-21 16:25:32

+0

不是一個挖,只是一個建議和意見,你可能想要添加它是一個鉻/ Safari的解決方案。 :) – Skuld 2011-12-21 16:29:42

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/

+0

是的,這是有效的,但我真的尋找一種解決方案,不涉及有一個固定數量的項目。如果我將2個項目添加到列表中,它們將不會動畫,我指定了一些問題。 – 2011-12-22 16:09:51

+1

僅在CSS中不可能。 – Duopixel 2011-12-22 19:14:54

+0

這很糟糕,雖然會很酷,但它可以完全替代jquery代碼,但是我必須使用javascript。感謝您的答案,雖然 – 2011-12-23 08:16:09