1.2.0rc1 ngClass breaks enter animations

[gustly]

Plunker at http://plnkr.co/edit/1t54n1Y8ngIsRpaPlEWZ?p=preview

If you animate between two elements using enter and leave, and the class is set via the ngClass directive, the enter animation fails. This happens because the enter animation is triggered before ngClass is evaluated, and thus the new element does not yet have its animation CSS class set.

Note that we are using 1.2.0rc1

[matsko]

This should be fixed once these two PRs get in: #3715 and #3717.

Lets revisit this once they're in.

[gustly]

Thanks, @matsko.

On a local git repo, we merged in your pull requests into the master angular.js code. We tried both pull requests in isolation and also a merge of the two. In all three cases, the enter animations do not work as intended.

It seems like the initial CSS state never happens for the entering element. This is true even when we hard-code the class without using ngClass or interpolation. So perhaps it's unrelated to ngClass at all, and is a more fundamental problem with the enter animation. It appears that the "ng-enter-active" CSS class is being applied at the same time as the "ng-enter" class, and thus the animation jumps straight to the terminal style without first picking up its initial conditions.

The leave animation always works as intended.

Note that we have been looking at this in Mac Chrome 29.0.1547.57 thus far.

[matsko]

@gustly taking a look...

[matsko]

OK there is definitely something wrong. Working on a fix.

[gustly]

@matsko thanks, great to hear. Let us know if we can do anything to help.

Also, props on being so responsive.

[matsko]

Turns out that this isn't a bug with animations but with how ngInclude handles ngClass. A bug inside of a bug if you will. Good thing you pointed this out.

[gustly]

@matsko that's interesting. Although I am a bit confused because we also saw this behavior when hard-coding the class attribute (meaning we were not even using ngClass). Thoughts?

[matsko]

It's a strange race-condition that occurs when you insert nodes quickly into a page and attach a CSS class with transition effects. What happens is that the element node thinks that a transition is in progress so it skips the first CSS class (in this case the .ng-event class) and then jumps straight to the 2nd class.

Working on a solution now. Waiting for it to be reviewed + approved.

[matsko]

Hey @gustly I think it's working with the latest PR. Can you double check using these two files?
https://s3.amazonaws.com/angularjs-dev/enter-leave-animate-bug/angular.js
https://s3.amazonaws.com/angularjs-dev/enter-leave-animate-bug/angular-animate.js

[matsko]

Ahhh looks like ngClass never makes it to ngView now. OK great this is an easy fix. Good thing that posted a fiddle link for me to test :)

[matsko]

@gustly working now: http://plnkr.co/edit/qqbUDrfevF7jf3mryELj?p=preview

[gustly]

@matsko awesome, we will try it out and report back.

[ludinov]

After I toggle class for root element with ng-class ( or in some cases just for any parent ) - animations stop working.
http://plnkr.co/edit/PcQPY5?p=preview

[matsko]

@gustly please use master to see if things are working.

[gustly]

@matsko sounds good, will get to this today.

[matsko]

@gustly this is made it to RC2 so just use that code: http://code.angularjs.org/1.2.0-rc.2/

[gustly]

@matsko we tried it out and everything seems to work well. Nice work.