AngularJS deaktivieren vorübergehend Animationen

Question

Ich habe eine ziemlich komplexe ng-repeat. Die Anzahl der angezeigten Objekte kann über zwei Schaltflächen gesteuert werden. Die erste Schaltfläche entfernt ein einzelnes Element aus der ng-Wiederholung mit einem Filter. Die zweite Taste entfernt eine Reihe von Elementen und zeigt eine Reihe anderer Elemente an (auch mit einem Filter).

Im Moment habe ich eine Animation auf der ng-Wiederholung wie folgt aus:

<style> 
    .animation { 
    -webkit-transition: 1s; 
    } 
    .animation.ng-enter { 
    opacity: 0; 
    } 
    .animation.ng-enter.ng-enter-active { 
    opacity: 1; 
    } 
    /* Similar for ng-leave */ 
</style> 

<div class="animation" data-ng-repeat="item in items"> ... </div> 

Wenn der Benutzer klickt auf die erste Taste I die Elemente wollen die Animation verwenden. Wenn der Benutzer auf die zweite Schaltfläche klickt, möchte ich alle Animationen deaktivieren.

Ich benutze AngularJS 1.2.16.

Answer 1

Sie könnten ng-class Direktive animation Klasse bedingt verwenden. Entfernen Sie die Klasse, wenn Sie es nicht wollen, konkret gesagt, wenn Sie auf die zweite Taste klicken.

<div ng-class="{animation: expression }" data-ng-repeat="item in items"> ... </div> 

In Snippet expression wird Zustand/scope Variable sein, die so zu false eingestellt werden, dass animation erhalten entfernt und Animation wird deaktiviert bekommen.