Closed TheComputerM closed 4 years ago
Indeed. Thank you.
And officially, the ripple effect doesn't disappear on mouseleave
event.
But in the unofficial implementations, the ripple effect disappears on mouseleave
event.
I'll make the declarative (data-ripplet
) edition behave the same as the unofficial implementations; the ripple effect remains until the pointerup
or pointerleave
event occurs.
# Next, I may consider an API for the developers to control.
Thanks, I have also found a workaround:
export function StopRipple({ ripple, remover }) {
ripple.addEventListener("transitionend", function (e) {
if (e.propertyName === "opacity" && remover.parentElement) {
remover.parentElement.removeChild(remover);
}
});
ripple.style.opacity = "0";
}
and remove the above lines from the main function
export function StartRipple(e, options) {
...
return { ripple, remover };
}
And can you recheck the official implementation, the ripple effect is still there until the mouse is not longer pressing the element.
Thank you. I will use it as a reference.
And can you recheck the official implementation, the ripple effect is still there until the mouse is not longer pressing the element.
Yes, but I was referring to the mouseleave
event. Sorry for the confusion.
In other words, when you drag (mousedown
-> mouseleave
-> mouseup
) the button, the official implementation removes the ripple effect on mouseleave
event, and unofficial implementations don't.
Can you take a look at https://github.com/TheComputerM/material-ripple-effect, can you spot any bugs? I would be happy to add you as a collaborator or transfer ownership to you.
v0.3.0 has been released.
clearing
option (default value is true
for backward compatibility)ripplet.clear(currentTarget?, generatedContainerElement?)
APIpointerup
or pointerleave
event occursExample:
<button
onpointerdown="ripplet(arguments[0], { clearing: false })"
onpointerup="ripplet.clear(this)"
onpointerleave="ripplet.clear(this)"
>Keep pressing!</button>
@TheComputerM Thank you very much!!
Nice
@TheComputerM
Can you take a look at https://github.com/TheComputerM/material-ripple-effect, can you spot any bugs?
Yeah, I took a look at your repository and I think RippleBind()
is a good API. I haven't found any bugs so far.
I would be happy to add you as a collaborator or transfer ownership to you.
Thanks for the offer, but I'm full of my own repository and my (paid) work, really thanks.
As per the material design guidelines, the ripple effect should not be removed until the mouse is lifted.
Example: https://vuetifyjs.com/en/directives/ripples/#ripple-directive