désactiver nganimate pour certains éléments

J'utilise le module ngAnimate, mais tous mes ng-if, ng-showetc, sont touchés par cela, je veux levier ngAnimate pour certains éléments sélectionnés. Pour les performances et quelques bugs dans les éléments qui s'affichent et se cachent très rapidement.

Merci.

Ajoutez simplement ceci à votre CSS. Il vaut mieux 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 que vous souhaitez désactiver. Exemple:

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

Si vous souhaitez activer les animations pour des éléments spécifiques (au lieu de les désactiver pour des éléments spécifiques), vous pouvez utiliser $ animateProvider pour configurer des éléments avec un nom de classe particulier (ou regex) à animer.

Le code ci-dessous activera les animations pour les éléments qui ont la angular-animateclasse:

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

Voici un exemple de balisage qui inclut la angular-animateclasse pour activer les animations:

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

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

Veuillez noter que j'utilise angular-animatecomme exemple et qu'il est entièrement configurable en utilisant la .classNameFilterfonction.

Il existe deux façons de supprimer les animations dans AngularJS si vous avez le module ngAnimate en tant que dépendance de 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 - ce doit être l'élément pour lequel angular ajoutera les classes css animationstate (par exemple ng-enter, ...)!

   $animate.enabled(false, theElement);

À partir de la version Angular 1.4, vous devez inverser les arguments:

$animate.enabled(theElement, false);

Documentation pour$animate .

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

Config

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

Usage

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

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

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

J'ai trouvé que $animate.enabled(false, $element);cela fonctionnera pour les éléments qui utilisent ng-showou ng-hidemais cela ne fonctionnera pas pour les éléments qui utilisent ng-ifpour une raison quelconque! La solution que j'ai fini par utiliser était de tout faire en CSS, ce que j'ai appris de ce fil 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 mes ng-if, donc ce serait ma solution:

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

Publiez simplement ceci comme une autre suggestion!

J'ai une liste dont le premier liest caché en utilisant ng-hide="$first". L'utilisation ng-enterentraîne l' liaffichage pendant une demi-seconde avant de disparaître.

Basé sur la solution de Chris Barr, mon code ressemble maintenant à ceci:

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

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, les ui-select sont configurés sur opacity: 0.

Il est donc nécessaire de définir l'opacité sur 1 en utilisant CSS:

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

Cela définira correctement l'opacité et le ui-select fonctionnera.