Deaktivieren Sie nganimate für einige Elemente

Ich bin das ngAnimate Modul verwenden, aber alle meine ng-if, ng-showusw, sind davon betroffen, möchte ich Hebel ngAnimate für einige ausgewählte Elemente. Für die Leistung und einige Fehler in Elementen, die sehr schnell ein- und ausgeblendet werden.

Vielen Dank.

Fügen Sie dies einfach Ihrem CSS hinzu. Es ist am besten, wenn es die letzte Regel ist:

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

Fügen no-animateSie dann der Elementklasse hinzu , die Sie deaktivieren möchten. Beispiel:

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

Wenn Sie Animationen für bestimmte Elemente aktivieren möchten ( anstatt sie für bestimmte Elemente zu deaktivieren), können Sie mit dem $ animateProvider Elemente mit einem bestimmten Klassennamen (oder regulären Ausdruck) zum Animieren konfigurieren.

Der folgende Code aktiviert Animationen für Elemente mit der angular-animateKlasse:

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

Hier ist ein Beispiel-Markup, das die angular-animateKlasse zum Aktivieren von Animationen enthält:

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

Plunker- Beispiel aus diesem Blog ausgeliehen und geändert, in dem nur der erste Filter Animationen enthält (aufgrund der angular-animateKlasse).

Bitte beachten Sie, dass ich angular-animateals Beispiel verwende und es mit der .classNameFilterFunktion vollständig konfigurierbar ist.

Es gibt zwei Möglichkeiten, Animationen in AngularJS zu entkalken, wenn Sie das Modul ngAnimate als Abhängigkeit von Ihrem Modul haben:

1. Deaktivieren oder aktivieren Sie die Animation global für den Dienst $ animate:

   $animate.enabled(false);

2. Deaktivieren Sie die Animationen für ein bestimmtes Element - dies muss das Element für diesen Winkel sein, um die CSS-Klassen des Animationsstatus hinzuzufügen (z. B. ng-enter, ...)!

   $animate.enabled(false, theElement);

Ab der Version Angular 1.4 sollten Sie die Argumente umkehren:

$animate.enabled(theElement, false);

Dokumentation für$animate .

Um ng-animate für bestimmte Elemente mithilfe einer CSS-Klasse zu deaktivieren, die dem Angular-Animate-Paradigma folgt, können Sie ng-animate so konfigurieren, dass die Klasse mithilfe von Regex getestet wird.

Konfig

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

Verwendung

Fügen Sie die ng-animate-disabledKlasse einfach zu allen Elementen hinzu, die von ng-animate ignoriert werden sollen.

Gutschrift http://davidchin.me/blog/disable-nganimate-for-selected-elements/

danke, ich habe eine Direktive geschrieben, die Sie auf das Element setzen können

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

Ich habe festgestellt, dass dies $animate.enabled(false, $element);für Elemente funktioniert, die verwendet werden, ng-showoder ng-hideaber nicht für Elemente, die ng-ifaus irgendeinem Grund verwendet werden! Die Lösung, die ich letztendlich verwendet habe, bestand darin, alles in CSS zu erledigen, was ich aus diesem Thread auf GitHub gelernt habe .

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

Ich möchte ngAnimate NICHT für meine verwenden ng-if, daher wäre dies meine Lösung:

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

Posten Sie dies einfach als einen weiteren Vorschlag!

Ich habe eine Liste, von der die erste limit versteckt wird ng-hide="$first". Verwenden Sie die ng-enterErgebnisse li, um eine halbe Sekunde lang angezeigt zu werden, bevor Sie verschwinden.

Basierend auf der Lösung von Chris Barr sieht mein Code jetzt folgendermaßen aus:

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

Ich weiß, dass es sich um eine verspätete Antwort handelt, aber hier verwenden wir in MainController:

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

Das Problem ist jedoch, dass, wenn wir alle Animationen deaktivieren, die UI-Auswahl so konfiguriert ist opacity: 0.

Daher ist es notwendig, die Deckkraft mithilfe von CSS auf 1 zu setzen:

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

Dadurch wird die Deckkraft richtig eingestellt und die UI-Auswahl funktioniert.