After implementing async data loading in my application, I noticed that NgRepeat only animates the first element in an array.
Check out the example on jsFiddle
Here is the HTML code snippet:
<div ng-repeat="x in data"></div>
And here is the CSS code snippet:
.box.ng-enter {
-webkit-transition: all 2s ease;
transition: all 2s ease;
opacity: 0;
top: 20px;
}
.box.ng-enter-stagger {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
Within this particular example, I utilized $timeout to simulate an async data source. However, I encountered the issue of only the first element being animated.
Can anyone shed some light on why this may be happening?
Thank you!