ng-class animation is broken when using with ng-repeat and orderBy filter

[vbilici]

Hello,
when using ng-class animations with ng-repeat directive and also using with orderBy Filter ng-repeat animation overrides the ng-class animation. (className-add never works and className-remove sometimes works). Is this a bug or a normal behaviour?

Here is the plunker:
http://plnkr.co/edit/29ORioZgazFwSvKn95ks?p=preview

Angular version: 1.2.18 (also tested with latest 1.3 and result is the same)

Thank you

[Narretz]

Strange indeed. maybe @matsko knows more

[matsko]

I will have a look later today.

[matsko]

Yes, this is the normal behaviour since the structural animation takes precedence over the class-based animation. First the move happens, then it waits a digest and ngClass changes (which causes an animation for a microsecond), then the move animation happens. Despite there being no animation setup for the move event (when orderBy does its thing), ngAnimate still thinks there is one since the .row-anim class has a transition property on it.

Unfortunetly there is no easy way to get around this on the same element. You could use ng-animate-children (brand new feature in 1.3) and place ng-class animations on the TD elements:

http://plnkr.co/edit/Q9BBlJzDI5yTWBDbqANw?p=preview

[matsko]

There's nothing that can be done directly without causing a bunch of breaking changes. So this will close for now.