Stop Angular Animation from happening on ng-show / ng-hide

angularjs, angularjs-animation, animation, font-awesome

Solution

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

Problem

Original source