I think the best way to do this is to use the $animateProvider.classNameFilter which will allow you to filter items to animate or in this case not to animate. We'll do something like:
$animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/);
//$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);
Demo:
http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview
Angular docs state:
Sets and/or returns the CSS class regular expression that is checked
when performing an animation. Upon bootstrap the classNameFilter value
is not set at all and will therefore enable $animate to attempt to
perform an animation on any element. When setting the classNameFilter
value, animations will only be performed on elements that successfully
match the filter expression. This in turn can boost performance for
low-powered devices as well as applications containing a lot of
structural operations.
As another answer per the comment with the no-animate directive, you could write an ng-show directive that will run at a higher priority and disable the animation. We will only do this if the element has the fa-spinner class.
problemApp.directive('ngShow', function($compile, $animate) {
return {
priority: 1000,
link: function(scope, element, attrs) {
if (element.hasClass('fa-spinner')) {
// we could add no-animate and $compile per
// http://stackoverflow.com/questions/23879654/angularjs-exclude-certain-elements-from-animations?rq=1
// or we can just include that no-animate directive's code here
$animate.enabled(false, element)
scope.$watch(function() {
$animate.enabled(false, element)
})
}
}
}
});
Demo: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview
Lastly, and similar to the above, we can use the no-animate directive if we want to make it a little more modular. In this case I'm naming the directive faSpin which you could do in the answer above. This is essentially the same only we are preserving the directive from the SO answer mentioned in the comment of the above codeset. If you only care about the fa-spin animation issues naming it this way works well, but if you have other ng-show animation problems you'd want to name it ngShow and add to the if clause.
problemApp.directive('noAnimate', ['$animate',
function($animate) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$animate.enabled(false, element)
scope.$watch(function() {
$animate.enabled(false, element)
})
}
};
}
])
problemApp.directive('faSpin', function($compile, $animate) {
return {
priority: 1000,
link: function(scope, element, attrs) {
if (element.hasClass('fa-spinner')) {
element.attr('no-animate', true);
$compile(element)(scope);
}
}
}
});
Demo: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview
