material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.3k stars 890 forks source link

[MWCRipple] Multiple Clicks Should Generate Multiple Ripples! #1775

Closed iMrDJAi closed 1 year ago

iMrDJAi commented 4 years ago

Describe the bug Unlike MDC, it's not matter how much you do click in MWC, the ripple animation will ignore all of your clicks until it completes before it starts again. This gives me a weird feeling, it looks kinda slow, you should test it yourself from here: material-components-web: https://material-components.github.io/material-components-web-catalog/#/component/icon-button material-components-web-components: https://material-components.github.io/material-components-web-components/demos/icon-button/ You can clearly see the difference, the ripple on MDC is far better.

To Reproduce Steps to reproduce the behavior:

  1. Do multiple clicks on any surface that has the MWC ripple effect enabled.
  2. Try the same again with MDC ripple.
  3. See the difference.

Expected behavior Multiple clicks should generate multiple ripples.

Screenshots ezgif-7-59987ff4d93b

Browser Version (please complete the following information): no need.

Additional context @asyncLiz provided me some additional info about my question on Disocrd:

The question that we'll need guidance on is what should happen when multiple clicks happen before a ripple's animation is complete?

  • MDC stops and restarts the animation
  • MWC ignores it and lets the animation complete
  • the old M1 generated a new ripple (allowing multiple ripples to exist at once)

M2 doesn't quite clarify the specifics of what should explicitly happen. Both MDC and MWC are making assumptions, so we'll let design tell us what to do exactly and investigate what other platforms do for reference

asyncLiz commented 4 years ago

Created b/168062197 for design guidance

asyncLiz commented 1 year ago

Per design, clicking multiple times on the ripple should not generate multiple ripples, but stop and restart the current ripple animation.

This is how it works in M3 now with <md-ripple>