AngularJSは一時的にアニメーションを無効にします

Question

私はかなり複雑ですng-repeat。表示される項目の数は、2つのボタンで制御できます。 最初のボタンは、フィルタを使用してng-repeatから1つの要素を削除します。 第2のボタンは、多数の要素を削除し、（フィルタを使用して）他の要素の束を表示します。

私は現在、このようなNGリピート上のアニメーションを持っている：

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

ユーザーが、私は要素がアニメーションを使用する最初のボタンをクリックする

。 ユーザーが2番目のボタンをクリックすると、アニメーションが無効になります。

私はAngularJS 1.2.16を使用しています。

Answer 1

ng-class指示文を条件付きでanimationにすることができます。 animationクラスを削除したい場合は、特に2番目のボタンをクリックすると言います。上記のスニペットにおいて

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

expressionはanimationが取り除かれます、アニメーションが無効になりますようにfalseにセットする条件/スコープ変数であろう。