Question

将Angular 1.2与ngAnimate模块一起使用时，它在ng-views上工作正常，但它也适用于ng-repeats。当有很多东西时，排序后会有很大的性能损失。

有没有办法不对ng重复进行动画处理？我试过在控制器上使用ng-animate，但它似乎必须在应用程序级别加载，然后它应用于所有内容。

Answer 1

我所做的是在更改控制器中的列表之前使用$ animate.enabled（false），并在$ timeout之后不久重新启用它。

Answer 2

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的优秀写作：）

我怎样才能在ng-views上使用ng-animate，而不是ng-repeats？

2 个答案: