disable nganimate for some elements - angularjs

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

If you want to enable animations for specific elements (as opposed to disabling them for specific elements) you can use the $animateProvider to configure elements with a particular class name (or regex) to animate.
The code below will enable animations for elements that have the angular-animate class:
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
$animateProvider.classNameFilter(/angular-animate/);
})
Here is example markup that includes the angular-animate class to enable animations:
<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 example borrowed and modified from this blog where only the first filter has animations (due to having the angular-animate class).
Please note that I'm using angular-animate as an example and it is completely configurable using the .classNameFilter function.

Answer 2

There are two ways you can disbale animations in AngularJS if you have the module ngAnimate as a dependency on your module:
Disable or enable the animation globally on the $animate service:
$animate.enabled(false);
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 3

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/

Answer 4

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 5

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 6

I've found that $animate.enabled(false, $element); will work for elements that use ng-show or ng-hide but it will not work for elements that use ng-if for some reason! The solution I ended up using was to just do it all in CSS, which I learned from 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;
}
}

Answer 7

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 8

I have a list from which the first li is hidden using ng-hide="$first". Using ng-enter results in the li being shown for half a second before disappearing.
Based on Chris Barr's solution, my code now looks like this:
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. */

Answer 9

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.