angularjs - examples - Detener la animación angular en ng-show/ng-hide

ng-show angularjs

Question

En mi aplicación AngularJS estoy usando fontawesome para mis spinners de carga:

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

También estoy usando AngularToaster para mensajes de notificación que tienen una dependencia en ngAnimate. Cuando incluyo ngAnimate en mi aplicación AngularJS, confunde mis spinners de carga animándolos de una manera extraña. Quiero evitar que esto suceda, pero no puedo encontrar la forma de desactivar la animación solo con estos cargadores (también apetecería tener que actualizar cada cargador que tengo en mi aplicación).

Aquí hay un plunkr que muestra mi problema exacto.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

Answer 1

Actualizando James Fiala Respuesta .

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

No necesita la ng-class como se menciona en Answer. Pero deberías tener fa-spin como uno de la clase.

Agregar estilo

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

Answer 2

Creo que la mejor manera de hacerlo es usar el $animateProvider.classNameFilter que te permitirá filtrar elementos para animar o en este caso no para animar. Haremos algo como:

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

Manifestación:

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

Estado de docs angulares:

Establece y / o devuelve la expresión regular de la clase CSS que está marcada al realizar una animación. Al arrancar, el valor de classNameFilter no se establece en absoluto y, por lo tanto, habilitará $ animate para intentar realizar una animación en cualquier elemento. Al establecer el valor de classNameFilter, las animaciones solo se realizarán en elementos que coincidan con éxito con la expresión de filtro. Esto, a su vez, puede aumentar el rendimiento de los dispositivos de baja potencia, así como de las aplicaciones que contienen muchas operaciones estructurales.

Como otra respuesta por el comentario con la directiva no-animate , podría escribir una directiva ng-show que se ejecutará con una prioridad más alta y deshabilitará la animación. Solo haremos esto si el elemento tiene la clase 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://.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)
          })

        }
      }
    }
  });

Demostración: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

Por último, y de forma similar a lo anterior, podemos utilizar la directiva no-animate si queremos que sea un poco más modular. En este caso, estoy nombrando la directiva faSpin que podría hacer en la respuesta anterior. Esto es esencialmente lo mismo, solo que estamos preservando la directiva de la respuesta SO mencionada en el comentario del conjunto de códigos anterior. Si solo te importan los problemas de animación fa-spin nombrarlo de esta manera funciona bien, pero si tienes otros problemas de animación ng-show , querrás ngShow nombre ngShow y agregarlo a la cláusula 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);

        }
      }
    }
  });

Demostración: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview

Answer 3

Encontré una manera más fácil.

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

Plunker bifurcado: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

Me encontré con otro pequeño problema como resultado de hacer esto, donde el ícono aparecería fuera de posición si girara durante más de 2 segundos, pero eso fue causado por la clase ''ng-hide-add-active'', así que simplemente agregado en mi css:

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

y eso se encargó de eso.

EDITAR: La solución de Nico es una versión ligeramente más limpia de esto, así que consideraría usar la suya.

Answer 4

Tuve un problema similar donde mi ícono seguiría girando hasta que la animación terminara, incluso después de que la variable $ scope se apagara. Lo que funcionó para mí fue envolver el elemento <i> fa-icon en un lapso.

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

¡Intentalo!

Answer 5

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

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

  });

Luego puede agregar la clase ng-animate-disabled a cualquier elemento que desee.

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