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:
Désactivez ou activez l’animation globalement sur le service $ animate:
$animate.enabled(false);
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.