1

I want to create ripple-effect on button.

When I click on Button component I want to add span element as it's child. It contains some CSS to make ripple effect. After 900ms I want to remove this span element. This idea founded here

Here some Sandbox to explain main idea.

So, the trouble is when I make fast multiple clicks and ripple-effect span is not working properly

J. Doe
  • 502
  • 1
  • 7
  • 16
  • It's working the way you applied it. Not any trouble. If you click on the button when your span is already in action, it's showing no effects. You should have Bounce so that you don't see unexpected behavior. I forked your sandbox to visualize how things changing: https://codesandbox.io/s/recursing-gareth-lc7wg?file=/src/styles.css – Mateen Jul 19 '20 at 03:46

1 Answers1

0

Due to the fact that you are using a single Ripple instead of mutiple ripples, your effect only works if the user does not click a second time, while time since the first click and your 900ms timeout has not passed.

You might create generated ripples on demand and delete them after the animation has ended with a custom event. So using setTimeout() will always trigger wrong behavior if user clicks mutiple times, because your code forces the single ripple to work like multiple ripples alone.

Hope my explanation was precise and clear enough.

Pascal
  • 108
  • 1
  • 7