{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material2/issues/7397","repository_url":"https://api.github.com/repos/angular/material2","labels_url":"https://api.github.com/repos/angular/material2/issues/7397/labels{/name}","comments_url":"https://api.github.com/repos/angular/material2/issues/7397/comments","events_url":"https://api.github.com/repos/angular/material2/issues/7397/events","html_url":"https://github.com/angular/material2/pull/7397","id":261459735,"number":7397,"title":"style(ripple): start fade out on mouseup","user":{"login":"willshowell","id":6475576,"avatar_url":"https://avatars0.githubusercontent.com/u/6475576?v=4","gravatar_id":"","url":"https://api.github.com/users/willshowell","html_url":"https://github.com/willshowell","followers_url":"https://api.github.com/users/willshowell/followers","following_url":"https://api.github.com/users/willshowell/following{/other_user}","gists_url":"https://api.github.com/users/willshowell/gists{/gist_id}","starred_url":"https://api.github.com/users/willshowell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willshowell/subscriptions","organizations_url":"https://api.github.com/users/willshowell/orgs","repos_url":"https://api.github.com/users/willshowell/repos","events_url":"https://api.github.com/users/willshowell/events{/privacy}","received_events_url":"https://api.github.com/users/willshowell/received_events","type":"User","site_admin":false},"labels":[{"id":308798701,"url":"https://api.github.com/repos/angular/material2/labels/cla:%20yes","name":"cla: yes","color":"009800","default":false},{"id":433951675,"url":"https://api.github.com/repos/angular/material2/labels/discussion","name":"discussion","color":"d4c5f9","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-09-28T21:00:57Z","updated_at":"2017-09-29T14:10:51Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/angular/material2/pulls/7397","html_url":"https://github.com/angular/material2/pull/7397","diff_url":"https://github.com/angular/material2/pull/7397.diff","patch_url":"https://github.com/angular/material2/pull/7397.patch"},"body":"**Purpose**\r\n\r\nThe goal of this is to start the ripple fade out immediately after mouseup rather than having to wait until the ripple animation has completed. My intention was to match the behavior seen in md1 which feels snappier and cleaner.\r\n\r\n**Background**\r\n\r\nThe change to make sure a ripple had completed its animation before hiding was made in #3400. It looks like the intention was to solve the problem of ripples not being added to the active ripple set until _after_ it was completed, as pointed out in #3398. However, it appears #3400 fixed that problem [anyway](https://github.com/angular/material2/pull/3400/files#diff-9bf3861c94a2bdcf0beae13a7f4b4c0eR104) by adding it to the active ripple set as soon as animation begins. Therefore, the additional check of making sure a ripple had completed its animation is not necessary.\r\n\r\n**Before**\r\n\r\n![ripple-b](https://user-images.githubusercontent.com/6475576/30990175-44da347e-a46e-11e7-8cae-130024351491.gif)\r\n\r\n\r\n**After**\r\n\r\n![ripple - a](https://user-images.githubusercontent.com/6475576/30990179-47665d30-a46e-11e7-9ab5-52b746cb7ceb.gif)\r\n\r\n\r\nThis is one that's been a nit of mine for a while, but I couldn't tell if the change a while back was intentional or accidental. @DevVersion, thoughts? If this ok, I'll add tests."},"comment":{"url":"https://api.github.com/repos/angular/material2/issues/comments/333137032","html_url":"https://github.com/angular/material2/pull/7397#issuecomment-333137032","issue_url":"https://api.github.com/repos/angular/material2/issues/7397","id":333137032,"user":{"login":"willshowell","id":6475576,"avatar_url":"https://avatars0.githubusercontent.com/u/6475576?v=4","gravatar_id":"","url":"https://api.github.com/users/willshowell","html_url":"https://github.com/willshowell","followers_url":"https://api.github.com/users/willshowell/followers","following_url":"https://api.github.com/users/willshowell/following{/other_user}","gists_url":"https://api.github.com/users/willshowell/gists{/gist_id}","starred_url":"https://api.github.com/users/willshowell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willshowell/subscriptions","organizations_url":"https://api.github.com/users/willshowell/orgs","repos_url":"https://api.github.com/users/willshowell/repos","events_url":"https://api.github.com/users/willshowell/events{/privacy}","received_events_url":"https://api.github.com/users/willshowell/received_events","type":"User","site_admin":false},"created_at":"2017-09-29T14:10:51Z","updated_at":"2017-09-29T14:10:51Z","author_association":"CONTRIBUTOR","body":"Yeah I suppose it's very much a personal preference. My concern when the current approach is that it feels quite piece-wise, where the expanding and fadeout are two distinctly separate animations. I'd prefer a smooth blending of the two.\r\n\r\nWhen I look at [these examples](https://material.io/guidelines/motion/material-motion.html#) from the spec, it feels like the ripples are starting to fade out before reaching the boundaries. It can be seen best in [this animation](https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01aGFDUmZwNG1sTTQ/responsive-02-feedback-v2.webm). That said, there is a difference between\r\n\r\n* Start fading out on `mouseup`\r\n* Lower opacity as radius grows, to mimic ink spreading thinner\r\n\r\nThe second option is really what I'd prefer - not sure of the complexity."}}
{"actor":{"display_login":"willshowell"}}