angularjs - 禁用某些元素的 nganimate

Question

我正在使用 ngAnimate 模块，但我所有的 ng-if、ng-show 等都受此影响，我想利用 ngAnimate 来实现一些功能选定的元素。对于性能和元素中的一些错误，显示和隐藏速度非常快。

谢谢。

Answer 1

如果您想为特定元素启用动画(而不是为特定元素禁用动画)，您可以使用 $animateProvider配置具有特定类名(或正则表达式)的元素以进行动画处理。

下面的代码将为具有 angular-animate 类的元素启用动画:

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

以下是示例标记，其中包含用于启用动画的 angular-animate 类:

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

Plunker示例借用并修改自 this blog其中只有第一个过滤器具有动画(由于具有 angular-animate 类)。

请注意，我使用 angular-animate 作为示例，并且可以使用 .classNameFilter 函数完全配置它。