Gap in ngClass switching with ngAnimate results in incorrect animations

[deakster]

See this plunkr for a demo: http://plnkr.co/edit/fwA6naUUfH55aJTXYVgm?p=preview

Clicking on the element should transition it's width between the values in .small, .medium and .large, but what is happening is that in between a class change (from small -> medium, or medium -> large), it's width is resetting.

Removing the ngAnimate dependency will show the correct behaviour, as will reverting to 1.2rc3, 1.2rc2 and prior. This may potentially tie in with a change discussed towards the bottom of #3587?

The issue seems to be due to a gap in how performAnimation calls the domOperation between $animate.removeClass and $animate.addClass calls, presumably because of separate timeouts? I verified that if the dom operations are performed immediately (in the same call stack), the issue will not occur.

[deakster]

@matsko Great job with 1.2.2, more and more of my animations are working correctly across my projects, definite big step forward, just a few more problems left.

Regarding this issue, while the gap between class changes is now resolved in 1.2.2, there seems to be a regression in that there is now a gap initially when an item is added. See http://plnkr.co/edit/pBC0rIB2QefsYNtDUXcC?p=preview and click the "Add Item" button. This was not a problem in 1.2.1.

I'm not sure if you want me to open a separate issue for this, or just keep discussion here, since it seems somewhat related?

[matsko]

So the issue here is that it shouldn't perform the initial ngClass animation when an repeat item is inserted right?

[matsko]

@deakster we have weekly releases now and I believe 1.2.3 comes out on Wed. So we can get this solved pretty fast.

[deakster]

Yes, it shouldn't perform the initial animation. That is what happens in 1.2.1, and also if you remove ngAnimate. The item getting added has a .small, .medium or .large even at the start, but it behaves as if it is momentarily missing (and therefore it is animating up to the sizes specified in those classes).