{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/866","labels_url":"https://api.github.com/repos/angular-ui/ui-router/issues/866/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-router/issues/866/comments","events_url":"https://api.github.com/repos/angular-ui/ui-router/issues/866/events","html_url":"https://github.com/angular-ui/ui-router/issues/866","id":27078831,"number":866,"title":"ui-view incompatible with ng-class - ALL ng-class-based animations broken - 0.2.8 & 1.2.11","user":{"login":"arush","id":329761,"avatar_url":"https://avatars.githubusercontent.com/u/329761?v=3","gravatar_id":"","url":"https://api.github.com/users/arush","html_url":"https://github.com/arush","followers_url":"https://api.github.com/users/arush/followers","following_url":"https://api.github.com/users/arush/following{/other_user}","gists_url":"https://api.github.com/users/arush/gists{/gist_id}","starred_url":"https://api.github.com/users/arush/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arush/subscriptions","organizations_url":"https://api.github.com/users/arush/orgs","repos_url":"https://api.github.com/users/arush/repos","events_url":"https://api.github.com/users/arush/events{/privacy}","received_events_url":"https://api.github.com/users/arush/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":22,"created_at":"2014-02-06T20:01:06Z","updated_at":"2015-07-27T12:21:42Z","closed_at":"2014-03-07T03:36:40Z","body":"I've been following #320 for a few months, and although it was closed, unfortunately my comment on ng-class based animations was skipped over. I was hoping this was resolved with 0.2.8 but it is not.\r\n\r\n**CSS classes managed by ng-class conflict with ALL ui-view animations. This means you CANNOT use ng-class on a ui-view**\r\n\r\nThe implications are pretty huge:\r\n* cannot change animations after bootstrap\r\n* cannot disable animations\r\n* cannot slide left/right depending on the app's context (see examples below)\r\n\r\nExpected results (working with ng-view)\r\n\r\n`<div ng-view class=\"firstAnimationClass ng-leave\" ng-class=\"this.variable\">`\r\n`<div ng-view class=\"firstAnimationClass ng-enter\" ng-class=\"this.variable\">`\r\nor\r\n`<div ng-view class=\"secondAnimationClass ng-leave\" ng-class=\"this.variable\">`\r\n`<div ng-view class=\"secondAnimationClass ng-enter\" ng-class=\"this.variable\">`\r\n\r\n(firstAnimationClass/secondAnimationClass is assigned by ng-class=\"this.variable\")\r\n\r\nNo matter how the dynamic class changes, both the entering and leaving view will have the same animation class\r\n\r\nActual results (using ui-view) \r\n\r\n`<div ui-view class=\"firstAnimationClass ng-leave\" ng-class=\"this.variable\">`\r\n`<div ui-view class=\"secondAnimationClass ng-enter\" ng-class=\"this.variable\">`\r\n\r\nAs soon as ng-class changes, the animation classes are out of sync and never get back in sync.\r\n\r\nThis situation should NEVER arise.\r\n\r\n----\r\nCode to reproduce\r\n\r\nI have put together 2 plunkrs that are identical, except the first uses angular 1.2 ng-view, and the second uses ui-router/angular-1.2\r\n\r\n**working in ngRoute**\r\nhttp://plnkr.co/edit/MLsgJiYXJ4EQ7OnmUQWB?p=preview\r\n\r\n**broken in uiView**\r\nuiView: http://plnkr.co/edit/GYYKkBre9oZ4Yl2rcKdZ?p=preview\r\n\r\nThese should behave identically, it is the same code. But you will quickly see how animation classes get out of sync.\r\n\r\n@nateabele you'll remember my previous examples when I initially raised this, and above I've updated all the libraries 1.2.11 and 0.2.8\r\n\r\n\r\nFYI I also recommend we close #862 in favour of this, as I believe it is the same bug (but a vague explanation)\r\n"},"comment":{"url":"https://api.github.com/repos/angular-ui/ui-router/issues/comments/125185084","html_url":"https://github.com/angular-ui/ui-router/issues/866#issuecomment-125185084","issue_url":"https://api.github.com/repos/angular-ui/ui-router/issues/866","id":125185084,"user":{"login":"ctretyak","id":4935982,"avatar_url":"https://avatars.githubusercontent.com/u/4935982?v=3","gravatar_id":"","url":"https://api.github.com/users/ctretyak","html_url":"https://github.com/ctretyak","followers_url":"https://api.github.com/users/ctretyak/followers","following_url":"https://api.github.com/users/ctretyak/following{/other_user}","gists_url":"https://api.github.com/users/ctretyak/gists{/gist_id}","starred_url":"https://api.github.com/users/ctretyak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ctretyak/subscriptions","organizations_url":"https://api.github.com/users/ctretyak/orgs","repos_url":"https://api.github.com/users/ctretyak/repos","events_url":"https://api.github.com/users/ctretyak/events{/privacy}","received_events_url":"https://api.github.com/users/ctretyak/received_events","type":"User","site_admin":false},"created_at":"2015-07-27T12:21:42Z","updated_at":"2015-07-27T12:21:42Z","body":"+1"}}