{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/10506","labels_url":"https://api.github.com/repos/angular/angular.js/issues/10506/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/10506/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/10506/events","html_url":"https://github.com/angular/angular.js/issues/10506","id":52269264,"number":10506,"title":"$animate service requests unnecessary animation frames","user":{"login":"dmcquillan314","id":2671966,"avatar_url":"https://avatars.githubusercontent.com/u/2671966?v=3","gravatar_id":"","url":"https://api.github.com/users/dmcquillan314","html_url":"https://github.com/dmcquillan314","followers_url":"https://api.github.com/users/dmcquillan314/followers","following_url":"https://api.github.com/users/dmcquillan314/following{/other_user}","gists_url":"https://api.github.com/users/dmcquillan314/gists{/gist_id}","starred_url":"https://api.github.com/users/dmcquillan314/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmcquillan314/subscriptions","organizations_url":"https://api.github.com/users/dmcquillan314/orgs","repos_url":"https://api.github.com/users/dmcquillan314/repos","events_url":"https://api.github.com/users/dmcquillan314/events{/privacy}","received_events_url":"https://api.github.com/users/dmcquillan314/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular.js/labels/component:%20ngAnimate","name":"component: ngAnimate","color":"bfdadc"},{"url":"https://api.github.com/repos/angular/angular.js/labels/needs:%20investigation","name":"needs: investigation","color":"444444"}],"state":"closed","locked":false,"assignee":{"login":"matsko","id":93018,"avatar_url":"https://avatars.githubusercontent.com/u/93018?v=3","gravatar_id":"","url":"https://api.github.com/users/matsko","html_url":"https://github.com/matsko","followers_url":"https://api.github.com/users/matsko/followers","following_url":"https://api.github.com/users/matsko/following{/other_user}","gists_url":"https://api.github.com/users/matsko/gists{/gist_id}","starred_url":"https://api.github.com/users/matsko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matsko/subscriptions","organizations_url":"https://api.github.com/users/matsko/orgs","repos_url":"https://api.github.com/users/matsko/repos","events_url":"https://api.github.com/users/matsko/events{/privacy}","received_events_url":"https://api.github.com/users/matsko/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/angular.js/milestones/80","html_url":"https://github.com/angular/angular.js/milestones/1.4.x","labels_url":"https://api.github.com/repos/angular/angular.js/milestones/80/labels","id":901585,"number":80,"title":"1.4.x","description":"","creator":{"login":"petebacondarwin","id":15655,"avatar_url":"https://avatars.githubusercontent.com/u/15655?v=3","gravatar_id":"","url":"https://api.github.com/users/petebacondarwin","html_url":"https://github.com/petebacondarwin","followers_url":"https://api.github.com/users/petebacondarwin/followers","following_url":"https://api.github.com/users/petebacondarwin/following{/other_user}","gists_url":"https://api.github.com/users/petebacondarwin/gists{/gist_id}","starred_url":"https://api.github.com/users/petebacondarwin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petebacondarwin/subscriptions","organizations_url":"https://api.github.com/users/petebacondarwin/orgs","repos_url":"https://api.github.com/users/petebacondarwin/repos","events_url":"https://api.github.com/users/petebacondarwin/events{/privacy}","received_events_url":"https://api.github.com/users/petebacondarwin/received_events","type":"User","site_admin":false},"open_issues":59,"closed_issues":135,"state":"open","created_at":"2014-12-12T10:36:27Z","updated_at":"2016-01-12T17:40:56Z","due_on":null,"closed_at":null},"comments":8,"created_at":"2014-12-17T17:42:32Z","updated_at":"2016-01-12T17:40:56Z","closed_at":"2016-01-12T17:40:56Z","body":"I'm creating a large collection of product-like objects and am noticing multiple performance issues when using a combination of ng-animate and any ng-* directive that has interaction with the $animate service. \r\n\r\nWhen inspecting the performance of the application on load of product cells I'm noticing a significant drop in performance when I have the ngAnimate module included:\r\n![screen shot 2014-12-17 at 11 29 14 am](https://cloud.githubusercontent.com/assets/2671966/5475604/114bdf36-85e0-11e4-8c34-f9a50213e713.png)\r\n\r\nOn average for a collection of ~100 products loading at once this seems to be adding ~200ms to the load of the page.\r\n\r\nBased on the angularJS documentation we should be able to do something like the following to disable animations on an element:\r\n        ```\r\n       $animateProvider.classNameFilter(/^(?!.*disable\\-animations).*$/i);\r\n       ```\r\n\r\nwhich would disable the animations on an element such as this:\r\n        ```\r\n        <div class=\"some-element disable-animations\" ng-if=\"condition\">show/hide me</div>\r\n        ```\r\n\r\nHowever when I inspect the application I do see that the animate module disables the animation but it does not disable the request for an animation frame which is causing issues.  \r\n\r\nFrom a bit a research into the animate module this seems to be the offending piece of code:\r\n        ```\r\n        //skip the animation if animations are disabled, a parent is already being animated,\r\n        //the element is not currently attached to the document body or then completely close\r\n        //the animation if any matching animations are not found at all.\r\n        //NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case an animation was found.\r\n        if (animationsDisabled(element, parentElement)) {\r\n          fireDOMOperation();\r\n          fireBeforeCallbackAsync();\r\n          fireAfterCallbackAsync();\r\n          closeAnimation();\r\n          return noopCancel;\r\n        }\r\n        ```\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/170986640","html_url":"https://github.com/angular/angular.js/issues/10506#issuecomment-170986640","issue_url":"https://api.github.com/repos/angular/angular.js/issues/10506","id":170986640,"user":{"login":"Narretz","id":1153097,"avatar_url":"https://avatars.githubusercontent.com/u/1153097?v=3","gravatar_id":"","url":"https://api.github.com/users/Narretz","html_url":"https://github.com/Narretz","followers_url":"https://api.github.com/users/Narretz/followers","following_url":"https://api.github.com/users/Narretz/following{/other_user}","gists_url":"https://api.github.com/users/Narretz/gists{/gist_id}","starred_url":"https://api.github.com/users/Narretz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Narretz/subscriptions","organizations_url":"https://api.github.com/users/Narretz/orgs","repos_url":"https://api.github.com/users/Narretz/repos","events_url":"https://api.github.com/users/Narretz/events{/privacy}","received_events_url":"https://api.github.com/users/Narretz/received_events","type":"User","site_admin":false},"created_at":"2016-01-12T17:40:56Z","updated_at":"2016-01-12T17:40:56Z","body":"I've inspected the performance of a list of 50 ng repeated items which each contain an ng-if and an input (which has a class based animation), and I couldn't see any sign of such an extreme number of requestAnimationFrame. This was in the snapshot, 1.4.x should be the same. If this issue is still relevant, please provide a demo that can be inspected."}}