parent ngClass is detected too late for child animations to work

[matsko]

In 1.3 we refactored the code to ensure that class-based animations are handled and coalesced via a combined digest. This is a nice fix that ensures that multiple classes can be added and removed without causing numerous animations to trigger.

This has, however, caused another bug to appear. Since Angular directives link from child to parent, this means that all of the watchers that are added for directives are registered in reverse order. This is fine and an expected thing. But the problem is that if any child animation is triggered then it will be triggered FIRST before the parent animation is triggered and if the child element/animation depends on a CSS selector to be matched for a transition or keyframe animation to occur then it will not be active in time when the ngClass animation kicks off.

<style>
.animations-on .entry { transition:1s linear all; }
.animations-on .entry.ng-enter { opacity:0; }
.animations-on .entry.ng-enter-active { opacity:1; }
.animations-on .entry.ng-leave { opacity:1; }
.animations-on .entry.ng-leave-active { opacity:0; }
</style>
<div ng-class="{'animations-on': startAnimations}">
   <div ng-repeat="item in items" class="entry" ng-if="startAnimations">
     {{ item }}
   </div>
</div>
<button ng-click="startAnimations=true">Start Animation</button>

http://plnkr.co/edit/4zlGUT4M01fNVs6Tanua?p=preview

The following cases are effected by this bug:

1. If the parent has ng-class then the CSS selector tree won't reach the child when the child's animations are run
2. There may be a possible bug that a combination of enter/leave/move/ngShow/ngHide working together with ngClass may cause the animation not to run since the classes may not be added in time for it to function or the -add and -remove classes may not be applied correctly. This is not the case for ngRepeat or ngIf on its own, but there may be some issue that comes up:
   ngRepeat: http://plnkr.co/edit/shxJzbvsFgmVEoQeLD4R?p=preview
   ngIf: http://plnkr.co/edit/lJoUdMh5Cw5MkF4bsooc?p=preview

What's the solution?
We combine all enter/leave/move/addClass/removeClass/setClass/animate animations together such that as soon as the animation kicks off then the classes ("ng-enter, ng-leave, ng-move, CLASS") are added together. This way an enter animation will already know that ng-class has seeded in classes and everything wil flush together.

[matsko]

This is fixed in 1.4.