Comments (7)
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.
from ripplet.js.
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.
- https://materializecss.com/buttons.html
- https://material-ui.com/components/buttons/
- https://material.angular.io/components/button/
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.
from ripplet.js.
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.
from ripplet.js.
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.
from ripplet.js.
v0.3.0 has been released.
- added
clearing
option (default value istrue
for backward compatibility) - added
ripplet.clear(currentTarget?, generatedContainerElement?)
API - in declarative edition, the ripple effect remains until the
pointerup
orpointerleave
event occurs
Example:
<button
onpointerdown="ripplet(arguments[0], { clearing: false })"
onpointerup="ripplet.clear(this)"
onpointerleave="ripplet.clear(this)"
>Keep pressing!</button>
@TheComputerM Thank you very much!!
from ripplet.js.
Nice
from ripplet.js.
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.
from ripplet.js.
Related Issues (9)
- Various ripple effects HOT 5
- RTL support HOT 3
- Ripple doesn't work on bootstrap modal HOT 2
- Sometimes the ripple just flickers instead of 'ripples'? HOT 1
- transform animation not playing on chrome in react HOT 3
- FeatureRequest: Append to targetElement HOT 15
- Disable right click for ripple effect? HOT 2
- Option to set class for parent of ripple element HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ripplet.js.