{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/12732","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/12732/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/12732/comments","events_url":"https://api.github.com/repos/angular/angular/issues/12732/events","html_url":"https://github.com/angular/angular/issues/12732","id":187520558,"number":12732,"title":"Animation Callback affecting animation performance","user":{"login":"Numel2020","id":23141177,"avatar_url":"https://avatars.githubusercontent.com/u/23141177?v=3","gravatar_id":"","url":"https://api.github.com/users/Numel2020","html_url":"https://github.com/Numel2020","followers_url":"https://api.github.com/users/Numel2020/followers","following_url":"https://api.github.com/users/Numel2020/following{/other_user}","gists_url":"https://api.github.com/users/Numel2020/gists{/gist_id}","starred_url":"https://api.github.com/users/Numel2020/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Numel2020/subscriptions","organizations_url":"https://api.github.com/users/Numel2020/orgs","repos_url":"https://api.github.com/users/Numel2020/repos","events_url":"https://api.github.com/users/Numel2020/events{/privacy}","received_events_url":"https://api.github.com/users/Numel2020/received_events","type":"User","site_admin":false},"labels":[{"id":217956517,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20animations","name":"comp: animations","color":"c7def8","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-05T20:17:39Z","updated_at":"2017-02-06T17:53:32Z","closed_at":"2017-01-03T18:54:50Z","body":"<!--\r\nIF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING\r\n-->\r\n\r\n**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[x] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\n<!-- Describe how the bug manifests. -->\r\nSo I have constructed a simple route animation from one component to the next that fades in one component and reveals the other. I have implemented simple animation callbacks which will fire when the *User Component* animation starts and when it also ends.\r\nThe callbacks work has expected and report themselves in the console when they are fired.\r\nbut there implementation causes the animation to have a delay on its start which is not what I am expecting. The only element that I can see that might be causing this is this piece of code:\r\n\r\n     <div [@routeAnimation]=\"show\"\r\n     (@routeAnimation.start)=\"onStart($event)\"\r\n     (@routeAnimation.done)=\"onDone($event)\">\r\n\r\n**Expected behavior**\r\n<!-- Describe what the behavior would be without the bug. -->\r\nso the actually behaviour is to simply remove the routeAnimation prefixes with reference to the functions that it calls and you will notice seamless transition between one component to the next\r\n\r\n**Minimal reproduction of the problem with instructions**\r\n<!--\r\nIf the current behavior is a bug or you can illustrate your feature request better with an example, \r\nplease provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via\r\nhttps://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).\r\n-->\r\nPlease follow this link http://plnkr.co/edit/d1UQcN?p=preview\r\n\r\n**What is the motivation / use case for changing the behavior?**\r\n<!-- Describe the motivation or the concrete use case -->\r\nThe method of callback should not impact on performance of the animation, where you are wanting to make callbacks on every animation this effect could be problematic\r\n\r\n**Please tell us about your environment:**\r\n<!-- Operating system, IDE, package manager, HTTP server, ... -->\r\nPhpStorm 2016.2\r\nOSx el capitain\r\n\r\n* **Angular version:** 2.0.X\r\n<!-- Check whether this is still an issue in the most recent Angular version -->\r\nAngular 2.1.0\r\n\r\n* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]\r\n<!-- All browsers where this could be reproduced -->\r\nChrome 54.0.2840.71 (64-bit)\r\n \r\n* **Language:** [all | TypeScript X.X | ES6/7 | ES5]\r\ntypescript 2.0.3\r\n\r\n* **Node (for AoT issues):** `node --version` =   \r\nnpm 3.10.4"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/277759527","html_url":"https://github.com/angular/angular/issues/12732#issuecomment-277759527","issue_url":"https://api.github.com/repos/angular/angular/issues/12732","id":277759527,"user":{"login":"Numel2020","id":23141177,"avatar_url":"https://avatars.githubusercontent.com/u/23141177?v=3","gravatar_id":"","url":"https://api.github.com/users/Numel2020","html_url":"https://github.com/Numel2020","followers_url":"https://api.github.com/users/Numel2020/followers","following_url":"https://api.github.com/users/Numel2020/following{/other_user}","gists_url":"https://api.github.com/users/Numel2020/gists{/gist_id}","starred_url":"https://api.github.com/users/Numel2020/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Numel2020/subscriptions","organizations_url":"https://api.github.com/users/Numel2020/orgs","repos_url":"https://api.github.com/users/Numel2020/repos","events_url":"https://api.github.com/users/Numel2020/events{/privacy}","received_events_url":"https://api.github.com/users/Numel2020/received_events","type":"User","site_admin":false},"created_at":"2017-02-06T17:53:32Z","updated_at":"2017-02-06T17:53:32Z","body":" hello @matsko \r\n\r\nJust reinstalled the CLI on my machine to the latest version, and checked my plunker, the update does not seem to have fixed the issue with the callback inclusion.\r\n1. with the inclusion of this code\r\n`<div [@routeAnimation]=\"show\"\r\n (@routeAnimation.start)=\"onStart($event)\"\r\n (@routeAnimation.done)=\"onDone($event)\">`\r\n\r\nI always experience a slight delay on the re-entry of the first div from the last one.\r\n\r\n2. Now remove the callbacks from the div\r\n`<div>`\r\n\r\nThe animation plays smooth without delay. \r\n[EXAMPLE](http://plnkr.co/edit/d1UQcN?p=preview)\r\n\r\nPlease have a look and tell me if I have made an error.\r\n\r\nmany thanks\r\n"}}
{"actor":{"display_login":"Numel2020"}}