Angular ngAnimate causes width animations to jump - css

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