web-dev-qa-db-fra.com

désactiver nganimate pour certains éléments

J'utilise le module ngAnimate, mais tous mes ng-if, ng-show, etc. sont affectés par cela, je souhaite utiliser ngAnimate pour certains éléments sélectionnés .

merci.

angularjsng-animate
92
drtobal

Ajoutez simplement ceci à votre CSS. C'est mieux si c'est la dernière règle:

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

ajoutez ensuite no-animate à la classe d’élément que vous souhaitez désactiver. Exemple:

<div class="no-animate"></div>
54
David Addoteye

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 (ou une expression régulière) à animer.

Le code ci-dessous activera les 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:

<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 Plunker emprunté et modifié à partir de ce blog où seul le premier filtre a des animations (en raison de la classe angular-animate).

Veuillez noter que j'utilise angular-animate à titre d'exemple et qu'il est complètement configurable à l'aide de la fonction .classNameFilter.

102
Gloopy

Si vous avez le module ngAnimate comme dépendance de votre module, vous pouvez dissocier des animations dans AngularJS de deux manières:

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

    $animate.enabled(false);

  2. Désactiver les animations pour un élément spécifique - il doit s'agir de l'élément pour lequel angulaire ajoutera les classes CSSst d'animation (par exemple, ng-enter, ...) 

    $animate.enabled(false, theElement);

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

$animate.enabled(theElement, false);

Documentation pour $animate .

78
michael

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

Pour désactiver ng-animate pour certains éléments, à l'aide d'une classe CSS, qui suit le paradigme de l'animation angulaire, 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).)*$/);
    })

Utilisation

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

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

43
Blowsie

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 finalement utilisée consistait simplement à 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;
  }
}
18
Chris Barr

Je ne veux pas utiliser _ pour utiliser ngAnimate sur mon ng-if, voici donc 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!

3
Betty St

J'ai une liste à partir de laquelle la première li est masquée à l'aide de ng-hide="$first". En utilisant ng-enter, la li est affichée 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. */
2
robro

Je sais que la réponse est différée, mais nous utilisons ici 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 pour opacity: 0.

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

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

Ceci réglera correctement l'opacité et le ui-select fonctionnera.

0
David Branco