{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/2519","repository_url":"https://api.github.com/repos/angular-ui/ui-router","labels_url":"https://api.github.com/repos/angular-ui/ui-router/issues/2519/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-router/issues/2519/comments","events_url":"https://api.github.com/repos/angular-ui/ui-router/issues/2519/events","html_url":"https://github.com/angular-ui/ui-router/issues/2519","id":131176133,"number":2519,"title":"Feature Request: Animation Classes","user":{"login":"SirDarquan","id":9931708,"avatar_url":"https://avatars.githubusercontent.com/u/9931708?v=3","gravatar_id":"","url":"https://api.github.com/users/SirDarquan","html_url":"https://github.com/SirDarquan","followers_url":"https://api.github.com/users/SirDarquan/followers","following_url":"https://api.github.com/users/SirDarquan/following{/other_user}","gists_url":"https://api.github.com/users/SirDarquan/gists{/gist_id}","starred_url":"https://api.github.com/users/SirDarquan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SirDarquan/subscriptions","organizations_url":"https://api.github.com/users/SirDarquan/orgs","repos_url":"https://api.github.com/users/SirDarquan/repos","events_url":"https://api.github.com/users/SirDarquan/events{/privacy}","received_events_url":"https://api.github.com/users/SirDarquan/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular-ui/ui-router/labels/1.0","name":"1.0","color":"e11d21"},{"url":"https://api.github.com/repos/angular-ui/ui-router/labels/design","name":"design","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-02-03T22:36:54Z","updated_at":"2016-02-04T16:36:03Z","closed_at":null,"body":"Ui-Router is awesome because it hooks into the ngAnimate class and allows us to get things going quickly. After awhile though, you realize you want more dynamic animations so that certain tranisitions cause specific animations even though they're targeting the same ui-view element.\r\n\r\nWhat I would like to propose is adding a new attribute to the ui-view directive that allows a developer to specify css classes to be added during transition. ngAnimate already provides a set of classes that define the state of the animation that are added to ui-view while in transition. Their documentation also suggests that we use classes to aid in targeting specific elements. To make this slightly more dynamic, I use ng-class to change which class will produce the animation I'd like. The problem with this approach is that I don't know when the animation has ended and the last class I used remains in place. This leads to  odd transitions when a child state is causing a change.\r\n\r\nAnyway, the idea is that we can specify the css classes we'd like and the ui-view would take care of the lifespan of the class. It would only be on the view while the animation is occurring. This could be done just before you clone the element for the new entering view. by adding the class(es) to the ui-view element. This would ensure that it's on both the enter and leaving nodes. Since the leaving node is going to be destroyed, we don't have to worry about that one. But after the enter animation is over, the ui-router code needs to remove the class so that it's no longer there. $animate.enter is a promise, so we can add a success callback to handle the class removal.\r\n\r\nTheoretically, this is not hard. I was looking at the code base while trying to figure out if it could be done but I'm not familiar enough with the code to know all the gotchas that may exist. I'm also not sure where the equivalent functionality in the feature-1.0 branch is so I don't know if you guys have designed something better there.\r\n"},"comment":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/comments/179934424","html_url":"https://github.com/angular-ui/ui-router/issues/2519#issuecomment-179934424","issue_url":"https://api.github.com/repos/angular-ui/ui-router/issues/2519","id":179934424,"user":{"login":"nateabele","id":18288,"avatar_url":"https://avatars.githubusercontent.com/u/18288?v=3","gravatar_id":"","url":"https://api.github.com/users/nateabele","html_url":"https://github.com/nateabele","followers_url":"https://api.github.com/users/nateabele/followers","following_url":"https://api.github.com/users/nateabele/following{/other_user}","gists_url":"https://api.github.com/users/nateabele/gists{/gist_id}","starred_url":"https://api.github.com/users/nateabele/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nateabele/subscriptions","organizations_url":"https://api.github.com/users/nateabele/orgs","repos_url":"https://api.github.com/users/nateabele/repos","events_url":"https://api.github.com/users/nateabele/events{/privacy}","received_events_url":"https://api.github.com/users/nateabele/received_events","type":"User","site_admin":false},"created_at":"2016-02-04T16:36:03Z","updated_at":"2016-02-04T16:36:03Z","body":"Pretty sure Ionic already does this. We could take a look at whatever they're doing."}}