ng-animate causes unwanted animation with existing css transition properties (eg bootstrap)

[mediastuttgart]

i am having an issue where using animations (ngAnimate) for some components.

i have noticed that when using ngSwitch an animation occurs while angular is doing the switch. at first i had no idea why that happens (because i do not use any ng-animate on that) until i found out that this animation comes from the already defined transition properties of twitters bootstrap css.

i have setup an example on jsfiddle that demonstrates the issue

http://jsfiddle.net/WdL8H/

EDIT

found out that you can disable animations for certain classes with

$animateProvider.classNameFilter(/^((?!classname).)*$/);

so is this the way to go or is this a bug?

[mediastuttgart]

maybe related

#5552
http://stackoverflow.com/questions/20810791/angular-nganimate-causes-width-animations-to-jump

[matsko]

This is an unfortunate side-effect of animations in ngAnimate. Since the animation is defined on the base CSS class (the CSS class that is present on the element during the animation) then ngAnimate thinks that an animation will commence on the element upon insertion/deletion. 80% or so you'll want this to happen, but incase you want to explicitly define which classes are picked up by animate then you can use the classNameFilter (as you mentioned above).

//this forces all your animations to be defined as `animate-ANIMATION` (or atleast contain a class that fits that pattern).
$animateProvider.classNameFilter(/animate-\w+/);

If you still want ngAnimate to attempt animations on all classes, but you also want to avoid certain animations from occuring in ngAnimate then you can do this by cancelling out the transition/animation code within a CSS class by placing that code inside of the .CLASS.ng-animate selector. Here's an example for your .btn class:

.btn.ng-animate {
  transition:none 0s;
  -webkit-transition:none 0s;
}

Having $animate detect this is not possible due to the limitations of the DOM. So I'm going to need to close this since there is no permanent fix.