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 class。不需要时删除 animation class，特别是在单击第二个按钮时删除。

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

在上面的代码段中 expression 将是 condition/scope 变量，该变量将设置为 false 以便 animation 将被删除并且动画将被禁用。

AngularJS 暂时禁用动画

AngularJS temporarily disable animations

css

css-animations

angularjs

ng-animate