禁用某些元素的nganimate

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示例,其中只有第一个过滤器具有动画(由于具有angular-animate该类).

请注意,我使用的angular-animate是一个例子,它可以使用该.classNameFilter功能完全配置.

Answer 2

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

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

   $animate.enabled(false);
   

2. 禁用特定元素的动画 - 这必须是该角度的元素将添加animationstate css类(例如ng-enter,...)!

   $animate.enabled(false, theElement);
   

从Angular 1.4版本开始,您应该反转参数:

$animate.enabled(theElement, false);

文档$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,但它不会工作对于使用元素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;
  }
}