ngRepeatでnagAnimateを遅らせる方法

Question

ngRepeatの各項目をフェードインするときにngAnimateを使用すると、現在すべての項目が同時にフェードインします。前の項目が退色した後に各項目がフェードインすることは可能ですか？カスケード効果をもたらす50％？

<ul> 
    <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}"> 
    <img src="{{phone.img}}"> {{phone.name}} 
    </li> 
</ul> 

ngAnimateを使用すると、各アイテムのアニメーションを遅らせることができればいいと思います。このように：

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}"> 

これを解決する方法はありますか？

ありがとうございます！

は、あなたが繰り返し要素に遷移遅延スタイルを設定することにより、この効果を得ることができますGitHubのhttps://github.com/angular/angular.js/issues/2460に

Answer 1

これは現在1.2でネイティブにサポートされています。

CSS：

.animated.ng-enter-stagger { 
    transition-delay: 0.3s; 
    animation-delay: 0.3s; 
} 

そうように、あなたのCSSでng-enter-staggerセレクタを使用し、それを利用するためにhttps://docs.angularjs.org/api/ngAnimate#css-staggering-animations

サス（使用中の場合）：

=stagger($delay) 
    &-stagger 
    transition-delay: $delay 
    animation-delay: $delay 

.animated 
    &.ng-enter 
    +stagger(0.3s) 

Answer 2

を追加しました。そうでない場合は、インラインスタイルは全体の移行上書きされます、あなたはあなたのCSSで別々に移行プロパティを設定する必要があります

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{$index * 500}}ms"> 

を（v1.1.5デベロッパーが必要です）：ここで作成されたfork of the exampleがある

.phone-enter { 
    opacity:0; 
    -webkit-transition-property: all; 
    -webkit-transition-timing-function: ease-out-cubic; 
    -webkit-transition-duration: 400ms; 
} 
.phone-enter.phone-enter-active { 
    opacity: 1; 
} 

をヘイットウェル。