disable nganimate for some elements

Question

I'm using the ngAnimate module, but all my ng-if, ng-show, etc, are affected by that, I want to leverage ngAnimate for some selected elements. For performance and some bugs in elements that shows and hide very speedy.

thanks.

Answer 1

There are two ways you can disbale animations in AngularJS if you have the module ngAnimate as a dependency on your module:

1. Disable or enable the animation globally on the $animate service:

   $animate.enabled(false);
   

2. Disable the animations for a specific element - this must be the element for that angular will add the animationstate css classes (e.g. ng-enter, ...)!

   $animate.enabled(false, theElement);
   

---

As of Angular 1.4 version you should reverse the arguments:

$animate.enabled(theElement, false);

---

Documentation for $animate.

Answer 2

thanks, i wrote a directive which you can place on the element

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 3

I do NOT want to use ngAnimate on my ng-if's, so this would be my solution:

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

Just posting this as another suggestion!

Answer 4

I know that it is a delayed reply, but here we use in MainController:

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

But the problem is that when we disable all animations, the ui-select are configured to opacity: 0.

So, its necessary to set opacity to 1 using CSS:

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

This will properly set opacity and the ui-select will work.

Answer 5

Just add this to your CSS. It is best if it is the last rule:

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

then add no-animate to the class of element you want to disable. Example:

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

Answer 6

To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex.

Config

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

Usage

Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.

---

Credit http://davidchin.me/blog/disable-nganimate-for-selected-elements/