Angularjs 对某些元素禁用nganimate

我正在使用ngAnimate模块，但我的所有

ng if

、

ng show

等都会受到此影响，我希望为某些选定元素使用ngAnimate。 对于性能和一些错误的元素，显示和隐藏非常迅速

---

谢谢。

如果模块ngAnimate依赖于您的模块，则有两种方法可以解除AngularJS中的动画：

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

$animate.enabled(false);

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

---

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

$animate.enabled(theElement, false);

---

---

.

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

咖啡脚本：

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

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

JavaScript:

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

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

---

如果要为特定元素启用动画（而不是为特定元素禁用动画），则可以使用来配置具有特定类名（或正则表达式）的元素以设置动画

下面的代码将为具有

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>

{{item}}

从只有第一个过滤器有动画的地方借用和修改的示例（由于有

angular animate

类）

---

请注意，我正在使用

angular animate

作为示例，它完全可以使用

.classNameFilter

函数进行配置。

我发现

$animate.enabled（false，$element）将适用于使用
ng show
或
ng hide
的元素，但对于出于某种原因使用
ng的元素，它将不起作用！我最终使用的解决方案是在CSS中完成这一切，这是我从中学到的

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

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

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

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

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

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

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

配置

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

用法

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


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

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

然后向要禁用的元素类添加
no animate
。例如：

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

我有一个列表，使用
ng hide=“$first”
隐藏第一个
li
。使用
ng enter
会导致
li
在消失前显示半秒钟

基于Chris Barr的解决方案，我的代码现在如下所示：

HTML

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

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

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

只是把它作为另一个建议发布
 我知道这是延迟回复，但我们在MainController中使用：

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

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

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

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

这将正确设置不透明度，用户界面选择将起作用。
添加一些问题的示例代码。其中一个问题是ngAnimate强制所有中继器上显示
display:block
：
ng hide Add active.ng hide remove{display:block！important；}
最好的问题是“如何定义CSS，使ngAnimate在不完成完整动画循环的情况下，对隐藏的元素正确工作“。最好的答案来自下面的Chris Barr。这在特定元素上并不像预期的那样有效。如果我全局关闭动画，然后在一个特定元素上启用它，则它不起作用。应删除或编辑此答案，以指定它实际作用于哪个版本的Angular。对于1.2.10，它肯定不适用于选择性地为某些元素启用动画，这是AFAICT问题的全部要点。有人知道选项2是否适用于1.2.25版本吗？只需查看文档（）似乎«element»是传递给启用函数的第一个参数。您保存了我的一天。非常感谢这是最优雅的解决方案，因为它需要选择动画，并且动画元素通过类名与其他元素有明显区别。这应该是公认的解决方案。工作完美，拯救了我的一天！使用
/^（？：（！ng animate disabled）。*$/
regex禁用禁用
ng animate disabled
类的动画。很好的解决方案！我有一个分页表，每页20行。切换页面的时间有三分之一被浏览器用来处理甚至没有被使用的动画css类。我的情况是，如果加载了ngAnimate，像.loading.ng-hide这样的类将一直显示在屏幕上，直到完整的动画循环完成。这是最干净的答案，因为它基本上只是将正确的配置提供给ngAnimate并正常使用它。这比错误配置它，然后禁用它更可取。所以对你来说+1，我希望我能给你更多来平衡这个分数。这是最棘手的答案。使用css比使用js要好得多。请看@Blowsie answer，这是一种更通用、更正确的处理方法。这是一种非常巧妙的方法，并不总是清楚如何访问元素对象，还有一些其他方法，我担心我会用Javascript硬引用模板中定义的一个或多个元素，把我的控制器弄得乱七八糟。这感觉像是一个伟大的分离的关注，荣誉！参数顺序在$animate.enabled中颠倒，如果有人想知道为什么会禁用所有ng动画。如果使用
$animate.enable，效果会很好