desactivar nganimate para algunos elementos

Estoy usando el módulo ngAnimate, pero toda mi 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ápidamente.

Gracias.

Solo agregue esto a su CSS. Es mejor si es la última regla:

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

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

<div class="no-animate"></div>

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 expresión regular) para animar.

El siguiente código habilitará animaciones para elementos que tengan la angular-animateclase:

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

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

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

Ejemplo de Plunker tomado y modificado de este blog donde solo el primer filtro tiene animaciones (debido a que tiene elangular-animate clase).

Tenga en cuenta que lo estoy usando angular-animatecomo ejemplo y es completamente configurable usando la .classNameFilterfunción.

Hay dos formas en que puede deshabilitar animaciones en AngularJS si tiene el módulo ngAnimate como una dependencia de su módulo:

1. Deshabilite o habilite la animación globalmente en el servicio $ animate:

   $animate.enabled(false);

2. Deshabilite las animaciones para un elemento específico: este debe ser el elemento para que angular agregue las clases css de animationstate (por ejemplo, ng-enter, ...).

   $animate.enabled(false, theElement);

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

$animate.enabled(theElement, false);

Documentación para$animate .

Para deshabilitar ng-animate para ciertos elementos, usando una clase CSS, que sigue el paradigma animado de Angular, puede configurar ng-animate para probar la clase usando expresiones regulares.

Config

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

Uso

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

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

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

Descubrí que $animate.enabled(false, $element);funcionará para elementos que usan ng-showo, ¡ ng-hidepero no funcionará para elementos que usan ng-ifpor alguna razón! La solución que terminé usando fue hacerlo 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;
  }
}

Yo no quiero usar ngAnimate en mis ng-if's, por lo que este sería mi solución:

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

¡Solo publico esto como otra sugerencia!

Tengo una lista de la que lise oculta el primero con ng-hide="$first". El uso de ng-enterresultados en el que lise muestra durante medio segundo antes de desaparecer.

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

HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

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 retrasada, pero aquí usamos en MainController:

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

Pero el problema es que cuando deshabilitamos todas las animaciones, la interfaz de usuario está configurada para 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á.