désactiver nganimate pour certains éléments

J’utilise le module ngAnimate, mais tous mes ng-if , ng-show , etc. sont concernés, je veux utiliser ngAnimate pour certains éléments sélectionnés. Pour la performance et certains bugs dans les éléments qui montrent et cachent très rapidement.

Merci.

Ajoutez simplement ceci à votre CSS. Il est préférable que ce soit la dernière règle:

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

puis ajoutez no-animate à la classe d’élément à désactiver. Exemple:

 

Si vous souhaitez activer des animations pour des éléments spécifiques (au lieu de les désactiver pour des éléments spécifiques), vous pouvez utiliser le paramètre $ animateProvider pour configurer des éléments avec un nom de classe (ou une expression régulière) particulière à animer.

Le code ci-dessous activera des animations pour les éléments ayant la classe angular-animate :

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

Voici un exemple de balisage incluant la classe angular-animate pour activer les animations:

 
{{item}}

Exemple de Plunker emprunté et modifié à partir de ce blog où seul le premier filtre a des animations (à cause de la classe angular-animate ).

Veuillez noter que j’utilise angular-animate comme exemple et qu’il est entièrement configurable à l’aide de la fonction .classNameFilter .

Il y a deux façons de décaler des animations dans AngularJS si vous avez le module ngAnimate comme dépendance sur votre module:

  1. Désactivez ou activez l’animation globalement sur le service $ animate:

     $animate.enabled(false); 
  2. Désactivez les animations pour un élément spécifique – cela doit être l’élément pour que l’angular ajoute les classes css animationstate (par exemple, ng-enter, …)!

     $animate.enabled(false, theElement); 

A partir de la version 1.4 angular, vous devez inverser les arguments:

 $animate.enabled(theElement, false); 

Documentation pour $animate .

merci, j’ai écrit une directive que vous pouvez placer sur l’élément

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

Pour désactiver ng-animate pour certains éléments, en utilisant une classe CSS, qui suit le paradigme d’animation angular, vous pouvez configurer ng-animate pour tester la classe à l’aide de regex.

Config

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

Usage

Ajoutez simplement la classe ng-animate-disabled à tous les éléments que vous voulez ignorer par ng-animate.


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

J’ai trouvé que $animate.enabled(false, $element); fonctionnera pour les éléments qui utilisent ng-show ou ng-hide mais cela ne fonctionnera pas pour les éléments qui utilisent ng-if pour une raison quelconque! La solution que j’ai fini par utiliser était de tout faire en CSS, ce que j’ai appris de ce sujet sur 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; } } 

Je ne veux pas utiliser ngAnimate sur mon ng-if , donc ce serait ma solution:

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

Il suffit de poster ceci comme une autre suggestion!

J’ai une liste à partir de laquelle le premier li est caché en utilisant ng-hide="$first" . L’utilisation de ng-enter résultat que le li est affiché pendant une demi-seconde avant de disparaître.

Sur la base de la solution de Chris Barr, mon code ressemble maintenant à ceci:

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

Je sais que c’est une réponse différée, mais ici nous utilisons dans MainController:

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

Mais le problème est que lorsque nous désactivons toutes les animations, l’interface utilisateur-sélection est configurée à l’ opacity: 0 .

Donc, il est nécessaire de définir l’opacité à 1 en utilisant CSS:

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

Cela réglera correctement l’opacité et l’interface utilisateur fonctionnera.