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

【问题标题】：How can I only use ng-animate on ng-views, and not ng-repeats?我怎样才能只在 ng-views 上使用 ng-animate 而不是 ng-repeats？
【发布时间】：2013-09-06 06:29:13
【问题描述】：

当使用 Angular 1.2 和 ngAnimate 模块时，它在 ng-views 上运行良好，但它也适用于 ng-repeats。当有很多时，排序后对性能的影响很大。

有没有办法不为 ng-repeats 设置动画？我试过只在控制器上使用 ng-animate，但似乎它必须在应用程序级别加载，然后应用于所有内容。

【问题讨论】：

标签： angularjs

【解决方案1】：

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

【讨论】：

【解决方案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 的优秀文章：）

【讨论】：

谢谢，但是我没有针对重复项的任何类，而且当列表中的项数发生变化时，性能会受到很大影响。排序没有问题，但是如果有 100 个项目然后被用户过滤到 50 个，那么包含 ngAnimate 会有几秒钟的延迟。也就是说，即使在 ng-repeat 项目上没有设置动画。