Disable nganimate for some items

Question

I use the ngAnimate module, but all my ng-if , ng-show , etc. depend on this, i want to use ngAnimate for some selected items. For performance and some errors in elements that show and hide very quickly.

thank.

Answer 1

Just add this to your CSS. Better if this is the last rule:

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

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

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

Answer 2

If you want to enable animation for certain elements (as opposed to disabling them for certain elements), you can use $ animateProvider to configure elements with a specific class name (or regular expression) for animation.

In the code below, animations for elements that have an angular-animate class will be included:

 var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) { $animateProvider.classNameFilter(/angular-animate/); }) 

Here is a markup example that includes the angular-animate to enable animation:

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

The Plunker example is borrowed and modified from this blog , where only the first filter has animation (due to the angular-animate ).

Note that I am using angular-animate as an example, and it is fully customizable using the .classNameFilter function.

Answer 3

There are two ways to cut animations in AngularJS if you have an ngAnimate module depending on your module:

• Disable or enable animation worldwide in the $ animate service:

   $animate.enabled(false); 

• Disable animation for a specific element - it must be an element for this angular, which will add css animation classes (e.g. ng-enter, ...)!

   $animate.enabled(false, theElement); 

---

According to angular 1.4, you have to change the arguments:

 $animate.enabled(theElement, false); 

---

Documentation for $animate : https://docs.angularjs.org/api/ng/service/ $ animate

Answer 4

thanks, I wrote a directive that you can place on an 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 5

To disable ng-animate for specific elements using the CSS class that follows the Angular animated 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).)*$/); }) 

Using

Just add the ng-animate-disabled class to any elements you want to ignore ng-animate.

---

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

Answer 6

I 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 simply to do all this 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 have a list from which the first li is hidden with ng-hide="$first" . Using ng-enter causes li map half a second before disappearing.

Based on the Chris Barr 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 8

I want NOT to use ngAnimate on my ng-if , so that would be my solution:

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

Just post it as another offer!

Answer 9

I know this is a delayed answer, but here we use in MainController:

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

But the problem is that when we turned off all animations, ui-select is set to opacity: 0 .

So, you need to set the opacity to 1 using CSS:

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

This will set the opacity correctly, and ui-select will work.