-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(ripple): support ripple fade-out on pointer up #9694
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ripple): support ripple fade-out on pointer up #9694
Conversation
By default, ripples in Angular Material will only fade out if the pointer is released and the enter animation completed. This behavior is similar in the MDC implementation of the Material Design guidelines. In some scenarios, developers prefer fading out the ripples immediately on pointer release. Similarly the Material Design guidelines also have some videos that show ripples that seem to follow that behavior as well. To be able to provide the necessary flexibility (as we already did with the animation durations), the `terminateOnPointerUp` global option has been added. Closes angular#9577
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
src/lib/core/ripple/ripple.spec.ts
Outdated
|
||
// Since the enter duration is bigger than the exit duration, the enter duration timer | ||
// will still exist. To properly finish all timers, we just wait the remaining time. | ||
tick (enterDuration - exitDuration); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Extra space
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done. Added this PR to release: minor
.
* feat(ripple): support ripple fade-out on pointer up By default, ripples in Angular Material will only fade out if the pointer is released and the enter animation completed. This behavior is similar in the MDC implementation of the Material Design guidelines. In some scenarios, developers prefer fading out the ripples immediately on pointer release. Similarly the Material Design guidelines also have some videos that show ripples that seem to follow that behavior as well. To be able to provide the necessary flexibility (as we already did with the animation durations), the `terminateOnPointerUp` global option has been added. Closes angular#9577 * Comment improvements * Remove unnecessary whitespace
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
By default, ripples in Angular Material will only fade out if the pointer is released and the enter animation completed. This behavior is similar in the MDC implementation of the Material Design guidelines.
In some scenarios, developers prefer fading out the ripples immediately on pointer release. Similarly the Material Design guidelines also have some videos that show ripples that seem to follow that behavior as well. To be able to provide the necessary flexibility (as we already did with the animation durations), the
terminateOnPointerUp
global option has been added.@jelbourn @willshowell I wasn't that sure about the naming of the option, because technically just having
terminateonMouseUp
is incorrect, because touch events are also supported.Closes #9577