Angular animation stops at ng-show / ng-hide

Question

In my AngularJS application, I use fontovesome for my boot videos:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i> 

I also use AngularToaster for notifications that are ngAnimate dependent. When I include ngAnimate in my AngularJS application, it will ruin my boot videos by animating them in a weird way. I want to stop this, but I can’t find a way to turn off the animation only on these bootloaders (it would also be necessary to update every bootloader that I have in my application).

Here it is showing my exact problem.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

Answer 1

I think the best way to do this is to use $animateProvider.classNameFilter , which will allow you to filter items for animation, or in this case not for animation. We will 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 regular expression of the CSS class, which is checked when performing the animation. When loading, the value of classNameFilter is not set at all and therefore will allow $ aimate to try to perform animation on any element. When setting the NameFilter class, animations will be performed only for elements that successfully match the filter expression. This, in turn, can improve performance for low-power devices, as well as applications containing many structural operations.

As another answer for a comment with the no-animate you can write the ng-show directive, which will work with a higher priority and disable animation. We will only do this if the element has a 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 code here $animate.enabled(false, element) scope.$watch(function() { $animate.enabled(false, element) }) } } } }); 

Demo: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

Finally, and similarly to the above, we can use the no-animate directive if we want to make it more modular. In this case, I call the faSpin directive, which you could do in the answer above. This is essentially the same, we keep the directive from the SO answer mentioned in the comment of the above code set. If you are worried about problems with fa-spin animation, naming them that way, this works well, but if you have other problems with ng-show animation, you want to name it ngShow and add it 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

Answer 2

I had a similar problem where my icon kept spinning until the animation ended, even after turning off the $ scope variable. What worked for me was to wrap the fa-icon <i> element in between.

 <span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span> 

Give it a try!

Answer 3

I found an easier way.

 <i class="fa fa-spinner" ng-show="loading" ng-class="{'fa-spin' : loading}"></i> 

Forked plunker: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

I ran into another small problem as a result of this, when the icon appeared out of position, if it turned around for more than 2 seconds, but it was caused by the class "ng-hide-add-active", so I just added to my css:

 .fa-spinner.ng-hide-add-active { display: none !important; } 

and it took care of it.

EDIT: Nico's solution is a slightly cleaner version, so I would consider using it.

Answer 4

 angular.module('myCoolAppThatIsAwesomeAndGreat') .config(function($animateProvider) { // ignore animations for any element with class `ng-animate-disabled` $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/); }); 

Then you can simply add the ng-animate-disabled class to any element you want.

<button><i class="fa fa-spinner ng-animate-disabled" ng-show="somethingTrue"></i></button>

Answer 5

Update Response by James Fiala .

 <i class="fa fa-spinner fa-spin" ng-show="loading"></i> 

You don't need an ng-class as stated in @James Fiala . But you must have fa-spin as one of the classes.

Add style

 .fa-spinner.ng-hide-add-active { display: none !important; }