2

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！

4

2 に答える 2

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/

于 2011-12-21T14:00:14.960 に答える
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/

于 2011-12-21T14:38:29.857 に答える