Как задержать ngAnimate в ngRepeat

Question

При использовании ngAnimate для постепенного исчезновения каждого элемента в ngRepeat в настоящее время все элементы исчезают одновременно. Возможно ли, чтобы каждый элемент исчезал после того, как предыдущий элемент исчез, например. 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: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

Для того, чтобы использовать его, используйте селектор ng-enter-stagger в вашем CSS, например так:

CSS:

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

(если используется):

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

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

Answer 2

Вы можете получить этот эффект, установив стиль перехода задержки на повторенного элемента. (Требуется v1.1.5)

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

Вы должны установить свои свойства перехода отдельно в вашем CSS, иначе внутренний стиль будет перезаписывать весь переход:

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

Вот fork of the example создатель heyotwell.