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

При использовании 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

Ответы

Ответ 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;
}

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

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

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

Ответ 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;
}

Вот вилка примера, созданная heyotwell.