对某些元素禁用nganimate

我正在使用ngAnimate模块，但是所有我的ng-if，ng-show等等都受此影响，我想将ngAnimate用于某些选定的元素。为了提高性能和显示和隐藏元素的速度非常快。

谢谢。

只需将其添加到您的CSS中即可。最好是最后一条规则：

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

然后将其添加no-animate到要禁用的元素类中。例：

<div class="no-animate"></div>

如果要为特定元素启用动画（而不是为特定元素禁用动画），则可以使用$ 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示例，其中只有第一个过滤器具有动画（由于具有angular-animate类）。

请注意，我angular-animate以示例为例，可以使用.classNameFilter函数完全对其进行配置。

如果您将ngAnimate模块作为模块的依赖项，则可以通过两种方法在AngularJS中取消动画处理：

1. 在$ animate服务上全局禁用或启用动画：

   $animate.enabled(false);

2. 禁用特定元素的动画-这必须是该角度的元素，它将添加animationstate css类（例如ng-enter，...）！

   $animate.enabled(false, theElement);

从Angular 1.4版本开始，您应该反转参数：

$animate.enabled(theElement, false);

的文档$animate。

要使用Angular animate范式的CSS类禁用某些元素的ng-animate，可以配置ng-animate以使用正则表达式测试该类。

设定档

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

用法

只需将ng-animate-disabled类添加到您要被ng-animate忽略的任何元素。

信用 http://davidchin.me/blog/disable-nganimate-for-selected-elements/

谢谢，我写了一条指令，您可以将其放置在元素上

CoffeeScript：

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

JavaScript：

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

我发现这$animate.enabled(false, $element);将对使用ng-show或的元素起作用，ng-hide但是对于出于某些原因的使用将不起作用ng-if！我最终使用的解决方案只是在CSS中完成所有操作，这是我从GitHub上的该线程中学到的。

的CSS

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

SCSS

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

我不希望使用ngAnimate我ng-if的，所以这将是我的解决方案：

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

只是将此发布为另一个建议！

我有一个列表，其中li使用隐藏了第一个ng-hide="$first"。在中使用ng-enter结果li显示半秒钟，然后消失。

基于克里斯·巴尔的解决方案，我的代码现在如下所示：

的HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

的CSS

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

我知道这是一个延迟回复，但是在这里我们在MainController中使用：

// disable all animations
$animate.enabled(false);

但是问题是，当我们禁用所有动画时，ui-select配置为 opacity: 0。

因此，有必要使用CSS将不透明度设置为1：

.ui-select-choices {
    opacity: 1 !important;
}

这将正确设置不透明度，并且ui-select将起作用。