ngClass in 1.2.0-rc1 with animations awkward #3587
Description
I think the animating of ngClass doesn't make sense. With 1.2.0-rc1, adding or removing a class works in a completely non-intuitive manner. Before it was easy to use class adding and removal to perform simple CSS-based animations: add a class, handle the CSS changes in the CSS. No problem.
Now, however, ngAnimate ends up waiting to add the new class until the animation has run, then applies the new class, then the actual animation happens. As an example, assume you had this:
.foo {
color: white;
transition: 5s ease all;
}
.foo.active {
color: red;
}
And in your view:
<span class="foo" ng-class="{active: fooEnabled}">Hello World</span>
Previously, the color would animate immediately upon setting fooEnabled to true. Now, there's a 5 second pause, then the animation occurs.
As a workaround, I've found that you can set the class on a parent object, and only have the transition on a child, but this is really impractical.
I think there either needs to be a way to prevent ngClass from animating or disable animations on ngClass altogether. It really doesn't make sense to add animations to ngClass, though.