アニメーション遅延NGリピート

Question

は、私は、CSSでのNGリピートおよび遅延でこのコードを持っている：

<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp 0.50s ease forwards;"> 

    <span class="fec">Updated Aug 29, 2016</span> 

    <span class="title">Internet Banner Advertising…</span> 

</div> 

私はNGリピートのすべての項目での遅延値は、増加していることが必要です。たとえば：

まずアイテム：アニメーション：アニメーション：moveUpという0.60sは前方 3番目の項目を和らげる：アニメーション：moveUpという0.50sは前方 2番目の項目を容易moveUpという0.70sは、転送

どのように私はそれを行うことができます和らげますか？

おかげ

Answer 1

あなたにはstyle角度表現を持つ属性0.50sを置き換えることができます。簡単な解決策は次のようになります。

<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp {{ (0.5 + 0.1 * $index) + 's' }} ease forwards;"> 

$indexあなたは0.1を乗算し、0.5をベースに追加しますので、もし各アイテムは、前任者よりも0.1秒より長い遅延を持つことになり、現在のng-repeat要素のインデックスが含まれています。

Answer 2

ngStyleディレクティブを$indexとすることができます。

angular.module('MyApp', []);

.moveUp { 
 
    position: relative; 
 
} 
 
@-webkit-keyframes moveUp { 
 
    0% { 
 
    top: 500px; 
 
    } 
 
    100% { 
 
    top: 0px; 
 
    } 
 
} 
 
@keyframes moveUp { 
 
    0% { 
 
    top: 500px; 
 
    } 
 
    100% { 
 
    top: 0px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 

 
    <div class="card moveUp" ng-repeat="x in [1,2,3,4,5,6] track by $index" ng-style="{'animation': 'moveUp ' + ($index/2) + 's ease forwards'}"> 
 

 
    <span class="fec">Updated Aug 29, 2016</span> 
 

 
    <span class="title">Internet Banner Advertising…</span> 
 

 
    </div> 
 

 
</div>

結果はあなたに0.5秒、1秒、1.5秒のように...

を与える：

は、キーフレームを使用してこの実施例を参照してください。