Ripple animation should conform to Material spec and other implementations

[jmroon]

There's one little thing that feels off about Quasar and leads to the components feeling less responsive than they actually are: the ripple only triggers on mouseup. After doing a demo of the framework, this has lead to a generation perception that it feels sluggish compared to alternatives. Thankfully this is a simple stylistic fix and not a performance related one.

If you see the material design specs and other implementations, ripples always trigger on mousedown and the ripple remains until mouseup. This results in a much 'snappier' feeling interface.

The specs say 'pressed', which can be a bit ambiguous as to whether or not it's mousedown or mouseup, but if you click any of their card components on the page, it makes it clear how the ripple should behave: it should start on mouse down, and if the mouse is held down, the ripple should remain until mouseup.

Quasar does have the option to set ripple: early, but this has 2 problems:
1 - it's very verbose to have to repeat this for every component with a ripple
2 - the fill effect from the ripple doesn't persist while the mouse is held down.

Specs:
https://material.io/components/buttons

Examples:
https://material-components.github.io/material-web/demos/button/
https://material.angular.io/components/button/overview
https://mui.com/components/buttons/
https://vuetifyjs.com/en/components/buttons/#props

[pdanpdan]

See here early: https://quasar.dev/vue-directives/material-ripple#ripple-api

[rstoenescu]

We had many complaints that the "early" behavior triggers the ripple when it shouldn't, like for example on mobile when you scroll a list. So we changed the default bevahior and added the "early" modifier.
We can't switch the bevahior because it would be a breaking change. Will revise this for Qv3 though.

[jmroon]

Thanks for the prompt answers!

Early does have one small issue: the ripple disappears as soon as the animation ends, whereas in the official implementation, the ripple persists until mouseup.

It would be great if the ripple could be revised for Qv3. :)

[kingyue737]

I agree. The default ripple behavior makes users feel sluggish and the animation with "early" modifier does not conform to material spec either. This issue prevents our team from switching from vuetify to quasar.