angularjs - example - Cómo retrasar ngAnimate en ngRepeat

ng-repeat index angularjs

Question

Cuando se utiliza ngAnimate para fundirse en cada elemento en ngRepeat, actualmente todos los elementos se atenúan al mismo tiempo. ¿Es posible que cada elemento se desvanezca después de que el elemento anterior se haya desvanecido, por ejemplo, al 50%, lo que produce un efecto de cascada?

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

Usando ngAnimate sería bueno si fuera posible retrasar la animación de cada elemento, por ejemplo, de esta manera:

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

¿Hay una manera de resolver esto?

¡Gracias!

Añadido a GitHub https://github.com/angular/angular.js/issues/2460

Answer 1

Ahora se admite de forma nativa con 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

Para usarlo, use el selector ng-enter-stagger en su CSS, así:

css:

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

sass (si está en uso):

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

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

Answer 2

Puede obtener este efecto configurando el estilo de retardo de transición en el elemento repetido. (Requiere v1.1.5)

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

Tendrá que establecer sus propiedades de transición por separado en su CSS, de lo contrario, el estilo en línea sobrescribirá toda la transición:

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

Aquí está una bifurcación del ejemplo creado por heyotwell.