{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/6484","labels_url":"https://api.github.com/repos/angular/material/issues/6484/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/6484/comments","events_url":"https://api.github.com/repos/angular/material/issues/6484/events","html_url":"https://github.com/angular/material/pull/6484","id":124100589,"number":6484,"title":"fix(bottomsheet): fix open animation for bottomsheet.","user":{"login":"DevVersion","id":4987015,"avatar_url":"https://avatars.githubusercontent.com/u/4987015?v=3","gravatar_id":"","url":"https://api.github.com/users/DevVersion","html_url":"https://github.com/DevVersion","followers_url":"https://api.github.com/users/DevVersion/followers","following_url":"https://api.github.com/users/DevVersion/following{/other_user}","gists_url":"https://api.github.com/users/DevVersion/gists{/gist_id}","starred_url":"https://api.github.com/users/DevVersion/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DevVersion/subscriptions","organizations_url":"https://api.github.com/users/DevVersion/orgs","repos_url":"https://api.github.com/users/DevVersion/repos","events_url":"https://api.github.com/users/DevVersion/events{/privacy}","received_events_url":"https://api.github.com/users/DevVersion/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"EladBezalel","id":6004537,"avatar_url":"https://avatars.githubusercontent.com/u/6004537?v=3","gravatar_id":"","url":"https://api.github.com/users/EladBezalel","html_url":"https://github.com/EladBezalel","followers_url":"https://api.github.com/users/EladBezalel/followers","following_url":"https://api.github.com/users/EladBezalel/following{/other_user}","gists_url":"https://api.github.com/users/EladBezalel/gists{/gist_id}","starred_url":"https://api.github.com/users/EladBezalel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/EladBezalel/subscriptions","organizations_url":"https://api.github.com/users/EladBezalel/orgs","repos_url":"https://api.github.com/users/EladBezalel/repos","events_url":"https://api.github.com/users/EladBezalel/events{/privacy}","received_events_url":"https://api.github.com/users/EladBezalel/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-12-28T18:06:14Z","updated_at":"2015-12-30T20:46:36Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/angular/material/pulls/6484","html_url":"https://github.com/angular/material/pull/6484","diff_url":"https://github.com/angular/material/pull/6484.diff","patch_url":"https://github.com/angular/material/pull/6484.patch"},"body":"This is fixing all the issues with close and open animation.\r\nIt work's perfectly, I already took a look at the Timings in the Chrome Dev Tools (Render Rate etc.)\r\n\r\nBut to be honest (in code) I'm not satisfied with using `$timeout`. But that's the only possibility because we inserting the element into the `DOM` at `80px` and then we wan't instant run the animation from `-100%`. But that's not possible. So we need to remove the transition and transform the bottomsheet at insertion down to `-100%`, and then after it got rendered down, we can fire the animation to `80px`. \r\n\r\nThat's the only possibility to get run with $animate (entering / leaving). \r\n\r\nFixes #6468"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/168070919","html_url":"https://github.com/angular/material/pull/6484#issuecomment-168070919","issue_url":"https://api.github.com/repos/angular/material/issues/6484","id":168070919,"user":{"login":"DevVersion","id":4987015,"avatar_url":"https://avatars.githubusercontent.com/u/4987015?v=3","gravatar_id":"","url":"https://api.github.com/users/DevVersion","html_url":"https://github.com/DevVersion","followers_url":"https://api.github.com/users/DevVersion/followers","following_url":"https://api.github.com/users/DevVersion/following{/other_user}","gists_url":"https://api.github.com/users/DevVersion/gists{/gist_id}","starred_url":"https://api.github.com/users/DevVersion/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DevVersion/subscriptions","organizations_url":"https://api.github.com/users/DevVersion/orgs","repos_url":"https://api.github.com/users/DevVersion/repos","events_url":"https://api.github.com/users/DevVersion/events{/privacy}","received_events_url":"https://api.github.com/users/DevVersion/received_events","type":"User","site_admin":false},"created_at":"2015-12-30T20:46:36Z","updated_at":"2015-12-30T20:46:36Z","body":"Your animation seem's to go in the complete wrong direction. To get that running, we need to think about the steps, which will executed by the browser and the `$aniamte` service. \r\n\r\n- Inserts Element to DOM at (default style: 80px)\r\n- ng-enter class tries to get the bottom-sheet down (but there is a transition duration defined [here](https://github.com/angular/material/blob/master/src/components/bottomSheet/bottom-sheet.scss#L21))\r\n- So we need to wait by default, to get **that** version running , [the render time while inserting to dom] + [transition time to get the bottomsheet down]\r\n- And after that we can simply run the open animation.\r\n\r\nBut my current fix is much more transparent then waiting for [the render time while inserting to dom] + [transition time to get the bottomsheet down]\r\n\r\nMy current PR Versions looks like this \r\n\r\n![](https://i.gyazo.com/1b7cad8a781fc97dcd8ca5cd4f53318d.gif)\r\n"}}