Jak opóźnić ngAnimate w ngRepeat

Question

Podczas używania ngAnimate do zanikania każdej pozycji w ngRepeat, obecnie wszystkie przedmioty są jednocześnie rozjaśniane. Czy każdy element może się rozjaśnić po przejściu poprzedniego elementu do np. 50% skutkuje efektem kaskadowym?

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

Korzystanie z ngAnimate byłoby miło, gdyby można było opóźnić animację każdego elementu np. tak:

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

Czy istnieje sposób rozwiązania tego problemu?

Dzięki!

Dodano do GitHub https://github.com/angular/angular.js/issues/2460

Answer 1

ta jest obecnie obsługiwane natywnie z 1,2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

Aby z niego skorzystać, należy użyć selektora ng-enter-stagger w CSS, tak jak poniżej:

css:

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

sass (jeśli jest używany):

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

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

Answer 2

Można uzyskać ten efekt poprzez ustawienie stylu przejściowego opóźnienia na wielokrotnym elementu. (Wymaga v1.1.5)

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

Musisz ustawić swoje właściwości przejścia osobno w CSS, inaczej styl inline zastąpi całą przejścia:

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

Oto fork of the example stworzony przez hejotwell.