ng-repeat and animate only animates first element

[Radnen]

I'm using v1.2.20 of Angular and I notice that sometimes only the first newly added element of a list gets animated even if 'n' items were added. This behavior is not consistent and it seems the animations work fairly often, but they don't work often enough to be troubling since that shouldn't really happen. I'm adding the elements by $timeout. I could show you guys a plunkr except whenever I do it seems to work. Which means, this sounds like an issue with my project but it's hard for you guys and I to find bugs in larger-than-trivial examples.

I suspect it's a timing issue in the animation, I am using a staggering animation. It looks exactly like if you used v1.2.9 of angular and saw how it's not working right. Except it doesn't happen all the time. Heh, it seems it only happens when I show the project off to a coworker or boss. "I swear it worked" I exclaim to no avail.

[Narretz]

A plunker would be very helpful. There's also this thread, which describes a similar problem: #7228

[Radnen]

Well my problem is different since it's Angular 1.2.20 and the problem is intermittent. I didn't want to show you a plunkr because it works each and every time I try. Here it is: http://plnkr.co/edit/WNqARpLVhGlcbOWBgESQ?p=preview

It may or may not be my code interfering, but I have so little there. Here is the website I'm working on, you'll notice it there: http://dev.toltd.net/#/work. The side menu and the portfolio page will sometimes animate the first item, or not animate at all and show you everything immediately as if I were using that 1.2.9 branch of Angular, but I am not.

None of my code directly interferes with the inner-workings of angular, or with js and css animations, so it might just be the angular library. But maybe I'm just not writing the css correctly, it's very hard to get a good grasp on the animations on angular when google is still flooded with the old animation methods.

Basically what I want is the simple ability to animate a list upon page entry. So the user could see the list build out when you get on the page. This was supposed to be a very simple effect.

I do have a workaround that involves me using $timeout to add one item at a time, but without a staggering animation affixed to it. :/

[Radnen]

Ok, I think It might be angular-ui-router doing it. Which has nothing to do with you guys.

But I still get the issue where there is no stagger, and all elements pop up immediately. Could there be some kind of caching? Or is the image loading doing it (throwing off the timing)? It happens in the plunker above, but rarely, and only when it involves loading the images.

Ok, now I get an issue where only the first two items animate in the list. View http://dev.toltd.net/#/ to see it. At this point I'm seriously considering not using angular css animations anymore.

[Radnen]

Ok, now I get an issue where only the first two items animate in the list. View http://dev.toltd.net/#/ to see it. At this point I'm seriously considering not using angular css animations anymore.

Again, I cannot show you in a plunker as because it works 100% in a plunker.

[Narretz]

If it doesn't work in a plunker, can you provide a minimal html example that I can run locally? It looks like a caching problem. Because when I open your site, all items animate correctly, but when I refresh only the first animates.

[Radnen]

Here is an example, and I think I got it to not animate due to caching. This could be my problem.
http://plnkr.co/edit/WNqARpLVhGlcbOWBgESQ?p=preview

But as I sais sometimes the first two items animate or the first item and this is if I use ngRoute rather than ui-router (which behaved a bit worse).

[Narretz]

I think I got the problem: it only happens when angular-animate.min.js is included. Yes, it's a bug that only manifests in the minified version. @matsko will be delighted to hear that we can reproduce this now; it was first reported here: #7547

It's possible that there's a bug in angular-animate, but you should see a definite improvements when switching to unminified script.

[leonderijke]

I'm running into the same issue using angular-animate 1.2.21. With the minified version only the first item is animated, with the unminified version all items are animated.

[matsko]

Yes this is a big issue with staggering animations in ngAnimate. There are two other issue that relate to this. @Radnen in the link you provided, I'm still unable to see the issue.

My guess is that it has to do with the requestAnimationFrame timeout and transition-delay being set too fast for the browser to catch up with it. Perhaps the solution would be to switch to using timeout. The first step however is getting a predictable example of the bug in action.

[Radnen]

Ok, it's true in the plunker, moving angular to the .min version animates just the first element. It really does happen all the time. @matsko try adding .min to the angular files.

But still the are times where the staggering animation does not play at all and all elements pop into view. It could be a timing thing.

[matsko]

@Radnen I think it is. I guess it is just a matter of stress testing it.