How to delay ngAnimate in ngRepeat

Question

When using ngAnimate to fade in each item in ngRepeat, currently all items fade in at the same time. Is it possible for each item to fade in after the previous item has faded to

Answer 1

You can get this effect by setting the transition-delay style on the repeated element. (Requires v1.1.5)

You'll have to set your transition properties separately in your CSS, otherwise the inline style will overwrite the entire transition:

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

Here is a fork of the example created by heyotwell.