angularjs - ng-views で ng-animate のみを使用し、ng-repeat では使用できないのはなぜですか?

Question

ngAnimate モジュールで Angular 1.2 を使用すると、ng-views で正常に動作しますが、ng-repeat にも適用されます。そして、たくさんある場合は、ソート後にかなりのパフォーマンス ヒットになります。

ng-repeat をアニメーション化しない方法はありますか? コントローラーで ng-animate だけを使ってみたのですが、アプリレベルでロードする必要があり、それからすべてに適用されるようです。

Answer 1

ng-animateクラスに基づいてのみアニメーション化し、アニメーション用に独自のクラスを作成して、ケースで必要な場所にのみ適用します。

例えば：

<div ng-init="items=['a','b','c','d','e','x']">
  <input placeholder="filter" ng-model="f" />
  <div ng-repeat="item in items | filter:f" class="repeat-item">
    {{item}}
  </div>
</div>

次に、その ngRepeat アイテムの実際の CSS アニメーション コードを定義すると、CSS セレクター コードは次のようになります。

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1;
}

(YearOfMoo の新しい ng-animate に関する優れた記事から引用: )