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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With