Staggering animations are running simultaneously when using ng-class and ng-show

[bpinto]

I'm having issues adding animation using ng-repeat with ng-show and ng-class. Basically if one of my items have a different class added via ng-class, animations for these different classes run simultaneously as in the gifs below.

With ng-class declaration:

Without ng-class declaration:

This is the plunker link: http://plnkr.co/edit/1H3K6EUOZ1y4xIEOw0eU?p=preview

[lgalfaso]

I am torn about this, and would like Matias to look into this issue

[rllola]

Up. I have the same issue.

[matsko]

@bpinto this is definitely supposed to work in a linear way and not in parallel. I'm working on a fix.

[Narretz]

This is now completely broken in 1.4.8. @matsko Is it possible that stagger isn't supported on ng-show anymore?

[JvanderHeide]

So eehh, I know this issue is quite old by now but I'm running in to an issue that seems to be the same issue right now, items with a different additional class are staggered based on their additional class as opposed to the class on which ".ng-enter-stagger" is defined.

Any chance that something has changed since 2015?

edit: Could it be that this is because gcsHashFn in animateCss.js takes in all the classes that a node has (and some more) as opposed to just the class that should trigger the .ng-EVENT-stagger to generate a hash for the cache? Is there a specific reason for it to do so and would changing this (if even possible) be considered breaking for existing implementations?

[matsko]

@JvanderHeide the way that AngularJS caches stagger elements (to avoid extra reflows) is by using element.className as a caching key. So this means that each element needs to have the same className value for the stagger to work.

If you want to apply styling based on optional classes then you may need to use an attribute selector in CSS (use a data- attr).

[JvanderHeide]

@matsko Yeah that's what I gathered from the source, and it makes sense. I guess I'll just have to work around it :+1:

In my case the data-attr would've been to much of a refactor to existing code (the entire website has multiple themes based on cascading classes, and we've only recently had the opportunity to start adding animations and transitions), so I've had to resolve it by wrapping the elements with another element :man_shrugging:

Thanks for the reply!