DOMの要素のnth-child-countにCSSプロパティを設定するにはどうすればよいですか？

Question

私は、クロスフェードインまたはビューアウトの要素のフルスクリーンスライドショーをコーディングしています。アニメーションの遅れと組み合わせた要素の不透明度をアニメーション化することで、クロスフェード効果を実現しています。

次のように私のHTMLは次のとおりです。

<div class="state state-sliding" id="slides"> 
    <slide class="slide"> 
     <video autoplay="" muted="" loop="" class="slide-content"></video> 
    </slide> 
    <slide class="slide"> 
     <video autoplay="" muted="" loop="" class="slide-content"></video> 
    </slide> 
    <slide class="slide"> 
     <img alt="slide image" class="slide-content" src="..."> 
    </slide> 
    <slide class="slide"> 
     <img alt="slide image" class="slide-content" src="..."> 
    </slide> 
</div> 

私は私の要素をアニメーション化するために、このバニラCSSを使用します。

.slide .slide-content, #slides .slide { 
    position: absolute; 
    min-width: 100%; 
    min-height: 100%; 
    height: auto; 
} 

#slides .slide-content { 
    background: #000; 
    backface-visibility: hidden; 
    opacity: 0; 
    transform: scale(1); 
    animation: crossFade 24s infinite; 
} 

#slides .slide:nth-child(3) .slide-content{ animation-delay: 6s } 
#slides .slide:nth-child(2) .slide-content{ animation-delay: 12s } 
#slides .slide:nth-child(1) .slide-content{ animation-delay: 18s } 

アニメーション遅延プロパティは、スライドを100％に色あせされます不透明度を1つずつ変更して、目的の効果を作り出します。

問題

4つのノードが#slides divの中に正確にあるとき、これは素晴らしい作品。 n #slides div内の子供の数はどのようにしてこの仕事をしますか？

アニメーション遅延Sスライド当たりの時間を乗じn番目の子（N）に等しくなければならないプロパティ：

アニメーション遅延（S） = ありません。 divの子供の * 1スライドあたりの時間

私はCSSやSASSでこれを実装する方法について考えていません。正しい方向への穏やかな動きは非常に役に立ちます。私はangularjs' ngStyleディレクティブを使用して私の問題を解決してきました

EDIT

。これは私のコンポーネントです：

<img ng-if="$ctrl.type === 'image'" ng-src="{{$ctrl.source}}" alt="slide image" class="slide-content" ng-style="{'animation': 'crossFade ' + {{$ctrl.total*6}} +'s infinite ', 'animation-delay': {{$ctrl.child*6}}+'s'}"> 

<video ng-if="$ctrl.type === 'video'" autoplay muted loop class="slide-content" ng-src="{{$ctrl.source}}" ng-style="{'animation': 'crossFade ' + {{$ctrl.total*6}} +'s infinite ', 'animation-delay': {{$ctrl.child*6}}+'s'}"> 
    Your browser does not support the video tag. 
</video> 

これを改善することは可能でしょうか？私は条件付きでだけでなく、あなたがスライダーは、よりそのnの要素が含まれていないことを知っていれば

Answer 1

、あなたは「最悪対応するために十分な長シリーズを生成することができます@keyframes CSSスタイルのアニメーションポイントを設定する必要があると思いますcase " 特に優雅ではありませんが、JavaScriptを避けることができます。 それはあなたが次の操作を行うことができ、現在のマークアップでのJavascriptを使用したミックスイン

@mixin slide-delay($children, $delay: 0s) { 
    @for $i from 1 through $children { 
    #slides .slide:nth-child(#{$i}) .slide-content{ animation-delay: $delay * $i } 
    } 
} 

@include slide-delay(4, 1s); 

Answer 2

とSASS

$delay: 6s; 
@for $i from 1 through 4 { 
    #slides .slide:nth-child(#{$i}) .slide-content{ animation-delay: $delay * $i } 
} 

かで行うのは簡単です：

//Get Slides NodeList 
var slides = document.querySelectorAll('#slides .slide-content'); 

//Make Array and reverse. 
var slidesReversed = Array.prototype.slice.call(slides).reverse(); 

//Set Animation Delay for each slide. 
for (var i = slidesReversed.length - 1; i >= 0; --i) { 
    slidesReversed[i].style.animationDelay = i * 6 + 's'; 
}