desactivar nganimate para algunos elementos

Estoy usando el módulo ngAnimate, pero todos mis ng-if , ng-show , etc. se ven afectados por eso, quiero aprovechar ngAnimate para algunos elementos seleccionados. Por rendimiento y algunos errores en elementos que se muestran y ocultan muy rápido.

Gracias.

Solo agrega esto a tu CSS. Lo mejor es que sea la última regla:

 .no-animate { -webkit-transition: none !important; transition: none !important; } 

luego agregue no-animate a la clase de elemento que desea deshabilitar. Ejemplo:

 

Si desea habilitar animaciones para elementos específicos (en lugar de deshabilitarlas para elementos específicos) puede usar $ animateProvider para configurar elementos con un nombre de clase particular (o regex) para animar.

El siguiente código habilitará animaciones para elementos que tienen la clase de angular-animate :

 var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) { $animateProvider.classNameFilter(/angular-animate/); }) 

Aquí hay un ejemplo de marcado que incluye la clase angular-animate para habilitar animaciones:

 
{{item}}

Ejemplo de Plunker prestado y modificado desde este blog donde solo el primer filtro tiene animaciones (debido a tener la clase angular-animate ).

Tenga en cuenta que estoy usando angular-animate como ejemplo y es completamente configurable con la función .classNameFilter .

Hay dos formas de desactivar las animaciones en AngularJS si tiene el módulo ngAnimate como dependencia de su módulo:

  1. Desactiva o habilita la animación globalmente en el servicio $ animate:

     $animate.enabled(false); 
  2. Desactive las animaciones para un elemento específico – este debe ser el elemento para ese angular agregará las clases css statestate (por ejemplo, ng-enter, …)!

     $animate.enabled(false, theElement); 

A partir de la versión 1.4 de Angular debes invertir los argumentos:

 $animate.enabled(theElement, false); 

Documentación para $animate

gracias, escribí una directiva que puedes colocar en el elemento

CoffeeScript:

 myApp.directive "disableAnimate", ($animate) -> (scope, element) -> $animate.enabled(false, element) 

JavaScript:

 myApp.directive("disableAnimate", function ($animate) { return function (scope, element) { $animate.enabled(false, element); }; }); 

Para desactivar ng-animate para ciertos elementos, usando una clase CSS, que sigue el paradigma animado angular, puede configurar ng-animate para probar la clase usando regex.

Config

  var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) { $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/); }) 

Uso

Simplemente agregue la clase ng-animate-disabled a cualquier elemento que desee que ng-animate ignore.


Crédito http://davidchin.me/blog/disable-nganimate-for-selected-elements/

He encontrado que $animate.enabled(false, $element); funcionará para los elementos que usan ng-show o ng-hide pero no funcionará para los elementos que usan ng-if por alguna razón! La solución que terminé usando fue simplemente hacer todo en CSS, que aprendí de este hilo en GitHub .

CSS

 /* Use this for transitions */ .disable-animations.ng-enter, .disable-animations.ng-leave, .disable-animations.ng-animate { -webkit-transition: none !important; transition: none !important; } /* Use this for keyframe animations */ .disable-animations.ng-animate { -webkit-animation: none 0s; animation: none 0s; } 

SCSS

 .disable-animations { // Use this for transitions &.ng-enter, &.ng-leave, &.ng-animate { -webkit-transition: none !important; transition: none !important; } // Use this for keyframe animations &.ng-animate { -webkit-animation: none 0s; animation: none 0s; } } 

NO quiero usar ngAnimate en mi ng-if , así que esta sería mi solución:

 [ng-if] { .ng-enter, .ng-leave, .ng-animate { -webkit-transition: none !important; transition: none !important; } } 

¡Solo publique esto como otra sugerencia!

Tengo una lista desde la cual se oculta el primer li usando ng-hide="$first" . El uso de ng-enter da como resultado que el li se muestre durante medio segundo antes de desaparecer.

Basado en la solución de Chris Barr, mi código ahora se ve así:

HTML

 

CSS

 .no-animate.ng-enter, .no-animate.ng-leave, .no-animate.ng-animate { transition: none !important; /* disable transitions */ animation: none 0s !important; /* disable keyframe animations */ } li.ng-enter { opacity: 0; transition: opacity 0.3s ease-out; } li.ng-enter-active { opacity: 1; } /* I use Autoprefixer. If you don't, please include vendor prefixes. */ 

Sé que es una respuesta tardía, pero aquí la usamos en MainController:

 // disable all animations $animate.enabled(false); 

Pero el problema es que cuando deshabilitamos todas las animaciones, la ui-select se configura a opacity: 0 .

Entonces, es necesario establecer la opacidad en 1 usando CSS:

 .ui-select-choices { opacity: 1 !important; } 

Esto establecerá correctamente la opacidad y la ui-select funcionará.