Come ritardare ngAnimate in ngRepeat

Question

Quando si utilizza ngAnimate per dissolvenza in ogni elemento in ngRepeat, al momento tutti gli elementi si dissolvono contemporaneamente. È possibile che ogni elemento si dissolva dopo che l'elemento precedente è sfumato ad es. Il 50% risultante in un effetto a cascata?

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

Utilizzando ngAnimate sarebbe bello se fosse possibile ritardare l'animazione di ciascun elemento, ad es. così:

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

C'è un modo per risolvere questo?

Grazie!

Aggiunto alla GitHub https://github.com/angular/angular.js/issues/2460

Answer 1

Questo è ora supportata in modo nativo con 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

Per fare uso di esso, utilizzare il selettore ng-enter-stagger nel CSS, in questo modo:

css:

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

sass (se in uso):

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

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

Answer 2

È possibile ottenere questo effetto impostando lo stile di transizione di ritardo sull'elemento ripetuto. (Richiede v1.1.5)

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

Dovrete impostare le proprietà di transizione separatamente nel CSS, altrimenti lo stile in linea sovrascriverà l'intero passaggio:

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

Ecco un fork of the example creato da heyotwell.