angularjs - Pysäytä kulma-animaatioita tapahtumasta ng-show / ng-hide

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

I had a similar problem where my icon would keep spinning until the animation finished, even after the $scope variable turned off. What worked for me was to wrap the <i> fa-icon element in a span.

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

Try it!

I've 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 did run into another small issue as a result of doing this where the icon would appear out of position if it spun for more than 2 seconds, but that was caused by the 'ng-hide-add-active' class, so I just added in my css:

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

and that took care of it.

EDIT: Nico's solution is a slightly cleaner version of this, so I'd consider using his.

angular.module('myCoolAppThatIsAwesomeAndGreat')
  .config(function($animateProvider) {

    // ignore animations for any element with class `ng-animate-disabled`
    $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/);

  });

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

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

Updating James Fiala Answer.

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

You don't need the ng-class as mentioned in @James Fiala Answer. But you should have fa-spin as one of the class.

Add style

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