AngularJS animations with ng-class when swapping between two classes

Question

Using AngularJS and ng-class, I'm trying to animate when classes change between three possible states. I have a div that can be in three states, represented by classes on the div. The states are defined as follows:

<div class='myDiv'></div>
<div class='myDiv foo'></div>
<div class='myDiv bar'></div>

Note that the classes foo and bar are exclusive meaning <div class="myDiv foo bar"></div> is not possible. I'm using the ng-class directive as follows:

<div class="myDiv" ng-class="{foo: first, bar: second}"></div>

The controller ensures that the boolean values first and second can both be simultaneously false but not true.

I'm finding that ngAnimate correctly detects css transitions between states 1<-->2 and 1<-->3 but does not from 2<-->3. I've tried adding css transition code for class selectors such as .myDiv.foo, .myDiv.bar, .myDiv.foo-add-active, etc. but either ngAnimate doesn't detect them (meaning it doesn't add the -add and -add-active classes) or the animation classes are added but no transition occurs.

Here is a link to a jsFiddle demonstrating the problem. Clicking either button and then re-clicking it shows the working transitions. Clicking either button and then clicking the other button shows the lack of transitions.

Is there a magic set of transitions that ngAnimate will pick up properly? Or is this a case where I need to not use ng-class and write my own custom directive?

couzzi · Accepted Answer · 2014-10-14 19:10:30Z

1

If you watch the style property of .myDiv in the console, you'll see that (for whatever reason) ngAnimate is setting transition-property to none.

Not sure why that is, but the fix it to slap !important on the transition within your CSS:

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
    -webkit-transition: all 1s linear !important;
    -moz-transition: all 1s linear !important;
    -o-transition: all 1s linear !important;
    transition: all 1s linear !important;
}

Working fiddle : http://jsfiddle.net/gd1hz5b7/

answered Oct 14, 2014 at 19:10

couzzi

6,3563 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wizeowl Over a year ago

This definitely works and is necessary for angular 1.2.x. As it turns out, this behavior is fixed in 1.3.0 so I'm adding an answer with that information for better visibility.

wizeowl · Accepted Answer · 2014-10-14 22:50:11Z

0

Odd timing but AngularJS 1.3.0 was just released and this now works as expected. couzzi's answer is correct for version 1.2.x, which I'm sure many people will stick with until 1.3.0 see more real life use.

Change the external resources to be:

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js

and the original posted fiddle (without !important) works fine. I've created a new jsFiddle for completeness.

answered Oct 14, 2014 at 22:50

wizeowl

5062 gold badges6 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS animations with ng-class when swapping between two classes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related