AngularJS 暂时禁用动画

Question

我有一个相当复杂的ng-repeat。显示项目的数量可以通过两个按钮来控制。 第一个按钮使用过滤器从 ng-repeat 中删除单个元素。 第二个按钮删除一堆元素并显示一堆其他元素（也使用过滤器）。

我目前在 ng-repeat 上有这样的动画：

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

当用户单击第一个按钮时，我希望元素使用动画。 当用户单击第二个按钮时，我想禁用任何动画。

我正在使用 AngularJS 1.2.16。

Answer 1

您可以使用ng-class 指令有条件地拥有animation 类。不需要时删除animation 类，特别是点击第二个按钮时。

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

在上面的 sn-p expression 将是条件/范围变量，它将设置为 false 以便 animation 将被删除并且动画将被禁用。