Остановка Angular Анимация происходит на ng-show/ng-hide

Ответ 1

Я думаю, что лучший способ сделать это - использовать $animateProvider.classNameFilter, который позволит вам фильтровать элементы для анимации или в этом случае не для анимации. Мы сделаем что-то вроде:

 $animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/);
 //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);

Демо:

http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview

Angular docs состояние:

Устанавливает и/или возвращает регулярное выражение класса CSS, которое проверяется при выполнении анимации. При загрузке значение classNameFilter не устанавливается вообще и поэтому позволит $aimate пытаться выполнить анимацию по любому элементу. При установке классаNameFilter значение, анимации будут выполняться только для элементов, которые успешно соответствуют выражению фильтра. Это, в свою очередь, может повысить производительность для маломощные устройства, а также приложения, содержащие много структурные операции.

В качестве другого ответа для комментария с директивой no-animate вы можете написать директиву ng-show, которая будет работать с более высоким приоритетом и отключить анимацию. Мы будем делать это только в том случае, если элемент имеет класс fa-spinner.

  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)
          })

        }
      }
    }
  });

Демо: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

Наконец, и аналогично вышесказанному, мы можем использовать директиву no-animate, если хотим сделать ее более модульной. В этом случае я называю директиву faSpin, которую вы могли бы сделать в ответе выше. Это по сути то же самое, мы сохраняем директиву из ответа SO, упомянутого в комментарии вышеприведенного набора кодов. Если вы беспокоитесь о проблемах с анимацией fa-spin, назвав их таким образом, это хорошо работает, но если у вас есть другие проблемы с анимацией ng-show, вы хотите назвать ее ngShow и добавить в предложение if.

  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);

        }
      }
    }
  });

Демо: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview

Ответ 2

У меня была аналогичная проблема, когда моя иконка продолжала вращаться, пока анимация не закончилась, даже после отключения переменной $scope. То, что сработало для меня, состояло в том, чтобы обернуть элемент fa-icon <i> в промежутке.

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

Попробуйте!

Ответ 3

Я нашел более простой способ.

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

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

Я столкнулся с еще одной небольшой проблемой в результате этого, когда значок появлялся вне позиции, если он развернулся более 2 секунд, но это было вызвано классом "ng-hide-add-active", поэтому я просто добавил в свой css:

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

и это позаботилось об этом.

EDIT: решение Nico - это немного более чистая версия, поэтому я бы подумал об использовании его.

Ответ 4

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

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

  });

Затем вы можете просто добавить класс ng-animate-disabled к любому элементу, который вы хотите.

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

Ответ 5

Обновление Ответ Джеймса Фиалы.

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

Вам не нужен ng-class, как указано в @James Fiala. Но вы должны иметь fa-spin как один из классов.

Добавить стиль

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