对某些元素禁用 nganimate答案

【问题标题】：disable nganimate for some elements对某些元素禁用 nganimate
【发布时间】：2014-02-10 12:49:17
【问题描述】：

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

谢谢。

【问题讨论】：

添加一些问题的示例代码。
其中一个问题是 ngAnimate 会在所有中继器上强制使用 display:block：ng-hide-add-active, .ng-hide-remove { display: block!important; }
要问的更好的问题是“如何定义我的 CSS 以使 ngAnimate 对隐藏的元素正确工作而无需完成完整的动画循环”。最佳答案来自下面的 Chris Barr。

标签： angularjs ng-animate

【解决方案1】：

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

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

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

$animate.enabled(theElement, false);

Documentation for $animate.

【讨论】：

这不适用于预期的特定元素。如果我全局关闭动画，然后在一个特定元素上启用它，它就不起作用。
这个答案应该被删除或编辑，以指定它实际适用于哪个版本的 Angular。对于 1.2.10，它绝对不适用于有选择地为某些元素启用动画，这是 AFAICT 问题的重点。
有谁知道选项 2 是否适用于 1.2.25 版本？
仅查看文档 (docs.angularjs.org/api/ng/service/$animate) 似乎 «element» 是要传递给启用函数的第一个参数。

【解决方案2】：

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

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

【讨论】：

这是一个非常漂亮的方法，它并不总是很清楚如何访问元素对象，并且使用其他一些方法我担心我会用 Javascript 硬引用弄乱我的控制器模板中定义的一个或多个元素。这感觉像是一个很好的关注点分离，赞！
$animate.enabled 中的参数顺序颠倒了，如果有人想知道为什么这会禁用所有 ng 动画。如果你使用$animate.enabled(element,false);，它就像一个魅力
抱歉我看到这仅适用于 1.4.x+，上面的代码对于以前的版本是正确的。

【解决方案3】：

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

【讨论】：

你拯救了我的一天。非常感谢
这是最优雅的解决方案，因为它需要选择加入动画，并且动画元素通过类名明显区别于其他元素。
这应该是公认的解决方案。完美运行，拯救了我的一天！
使用/^(?:(?!ng-animate-disabled).)*$/ 正则表达式禁用ng-animate-disabled 类的动画。
很好的解决方案！我有一个分页表，每页 20 行。浏览器处理甚至没有使用的动画 css 类消耗了三分之一的切换页面时间。

【解决方案4】：

我发现$animate.enabled(false, $element); 适用于使用ng-show 或ng-hide 的元素，但它不适用于 出于某种原因使用ng-if 的元素！我最终使用的解决方案是全部在 CSS 中完成，这是我从 this thread on 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 后，像 .loading.ng-hide 这样的类会一直留在屏幕上，直到完整的动画循环完成。这是最干净的答案，因为它基本上只是将正确的配置提供给 ngAnimate 并正常使用它。这比错误配置它，然后禁用它更可取。所以 +1 给你，希望我能给出更多来平衡这里的分数。
这是最棘手的答案。用 css 做，比用 js 做的好。
请看@Blowsie 的回答，这是处理这个问题的更通用和正确的方法

【解决方案5】：

要对某些元素禁用 ng-animate，请使用遵循 Angular animate 范例的 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/

【讨论】：

我认为这是过滤 ngannimate 行为最正确的方法！
这个答案值得滚动。
我可以确认，使用最新版本的 AngularJS，这绝对是解决问题的最佳方案。

【解决方案6】：

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

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

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

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

【讨论】：

如果您使用的是 sass，则不需要“-webkit-transition: none !important;”
请注意，这个答案是错误的，因为它会禁用所有动画，而不仅仅是那些由 Angular 处理的动画。
你试过了吗？让我看看你的代码示例。它适用于我和超过六个已批准它的人
我添加了一条.no-animate, .no-animate-children * 规则来覆盖儿童等
@DavidAddoteye 如果您在带有过渡的元素上使用 ng-show 或 ng-if，则此解决方案不可行。我的意思是..如果我有一个仅在 http 请求期间显示的加载器微调器并且当请求被解决时消失，添加这个类将导致根本没有动画！，迈克尔回答是好的，但实现起来太乏味了，你应该尽量避免在控制器中使用 css 选择器。创建一个指令是可以的，但是看看 Blowsie 的回答你会发现 AngularJS 团队已经提供了一种灵活的方法来解决这个问题；）

【解决方案7】：

我有一个列表，其中第一个 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. */

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

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

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

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

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

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

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

【讨论】：