disable nganimate for some elements

by

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.

More Related Contents:

  1. How to cancel an $http request in AngularJS?
  2. How can I dynamically add a directive in AngularJS?
  3. Combating AngularJS executing controller twice
  4. AngularJS – Does $destroy remove event listeners?
  5. Difficulty with ng-model, ng-repeat, and inputs
  6. How to access cookies in AngularJS?
  7. Sending event when AngularJS finished loading
  8. AngularJS vs Angular [closed]
  9. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  10. Can I use ng-model with isolated scope?
  11. Angular.js: How does $eval work and why is it different from vanilla eval?
  12. AngularAMD + ui-router + dynamic controller name?
  13. how to inject dependency into module.config(configFn) in angular
  14. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  15. Angularjs: ng-options group by
  16. Filter by multiple columns with ng-repeat
  17. Angular scope function executed multiple times
  18. How to wait till the response comes from the $http request, in angularjs?
  19. Should I care about W3C validation?
  20. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  21. Is it possible to use ng-include without web server?
  22. How to set the value attribute for select options?
  23. AngularJS: How to nest applications within an angular app
  24. Call Angular Function with Jquery
  25. AngularJS – why is $apply required to properly resolve a $q promise?
  26. How to use the axios library with AngularJS
  27. $sce.trustAsResourceUrl() globally
  28. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment