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功能完全配置。

Answer 2

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

在$ animate服务上全局禁用或启用动画：
```
$animate.enabled(false);
```
禁用特定元素的动画 - 这必须是该角色的元素将添加animationstate css类（例如ng-enter，...）！
```
$animate.enabled(false, theElement);
```

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

$animate.enabled(theElement, false);

Documentation for $animate

Answer 3

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

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

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

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

Answer 4

谢谢，我写了一个可以放在元素上的指令

<强> 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);
    };
});

Answer 5

要使用遵循Angular动画范例的CSS类禁用某些元素的ng-animate，您可以配置ng-animate以使用regex测试该类。

<强>配置

    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/

Answer 6

我发现$animate.enabled(false, $element);适用于使用ng-show或ng-hide的元素，但对于使用{{1}的元素无效 } 由于某些原因！我最终使用的解决方案就是在CSS中完成所有操作，这是我从this thread on GitHub学到的。

<强> CSS

ng-if

<强> SCSS

/* 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;
}

Answer 7

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

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

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

Answer 8

我有一个列表，使用li隐藏第一个ng-hide="$first"。使用ng-enter会导致li显示半秒钟，然后消失。

根据Chris Barr的解决方案，我的代码现在看起来像这样：

<强> 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. */

Answer 9

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

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

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

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

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

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

禁用某些元素的nganimate

9 个答案: