97

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

谢谢。

4

9 回答 9

107

如果您想为特定元素启用动画（而不是为特定元素禁用动画），您可以使用$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函数完全配置。

于 2014-07-02T22:31:13.513 回答
82

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

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

    $animate.enabled(false);

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

    $animate.enabled(false, theElement);

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

$animate.enabled(theElement, false);

的文档$animate。

于 2014-01-21T07:13:55.320 回答
53

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

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

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

<div class="no-animate"></div>
于 2015-06-19T20:54:17.073 回答
52

要为某些元素禁用 ng-animate，请使用遵循 Angular 动画范例的 CSS 类，您可以配置 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/

于 2015-06-01T12:56:32.447 回答
44

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

咖啡脚本：

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

JavaScript：

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});
于 2014-03-13T15:32:53.450 回答
19

我发现这$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;
  }
}
于 2015-01-09T14:25:06.267 回答
3

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

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

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

于 2015-11-13T09:54:50.850 回答
2

我有一个列表，其中第一个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. */
于 2015-07-21T10:42:06.747 回答
0

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

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

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

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

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

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

于 2017-12-05T18:17:43.357 回答