Angular ngAnimate causes width animations to jump

Question

I am using Angular with ngAnimate for a couple of cases. In another, I have a directive that is changing the width of the column (using Bootstrap col-md-* classes) and a simple transition that looks like this:

.column-view .column {
  transition: width 1s;
}

I am not explicitly using ngAnimate here, but it is certainly causing me grief simply for being included. Basically, the transition jumps to zero before transitioning to the new width. If I remove ngAnimate from my module, the transitions are smooth, but I need ngAnimate for other features in my app.

Can I disable whatever ngAnimate is doing to my plain CSS transition? What can I do here to fix this? Driving me crazy.

Here is a fiddle demonstrating the problem. See the comments for instructions to reproduce.

Answer 1

NOTE: I used current latest version (AngularJS 1.2.6) to investigate your issue.

I found there is a "blockTransitions" function being called internally, which does just that: it blocks transitions.

https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1099

If you comment the line linked above (the single line of the "blockTransitions" function body), the problem is solved.

As I can't tell if this is a proper solution (and probably it is not), I've just created a PR so they can properly resolve the issue:

https://github.com/angular/angular.js/pull/5552

---

Also using latest version, there is a workaround: http://jsfiddle.net/2fnhr/3/

app.config(function($animateProvider){
  $animateProvider.classNameFilter(/^((?!col-md).)*$/);
});

This will only apply the ngAnimate stuff for classes which does not contain "col-md" on its name, thus turning off the ngAnimate for the Bootstrap classes in question.

Explanation of the regular expression here: https://stackoverflow.com/a/406408/370290