angularjs - example - desactivar nganimate para algunos elementos

animaciones angular 6

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

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á.

Answer 5

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:

<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 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 .

Answer 6

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

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

luego agrega no-animate a la clase de elemento que deseas desactivar. Ejemplo:

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

Answer 7

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

<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. */

Answer 8

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

Answer 9

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!