处理点击移动动画

Question

我有一个带有涟漪效果的按钮。该按钮具有 mouseUp、mouseDown 和 onClick 处理程序。 当我点击一个按钮时，涟漪效应开始，一切正常。

Example

但是当我再次点击时，涟漪仍在移动（在涟漪区域），只有 mouseUp 和 mouseDown 触发（onClick 不会）。可以吗？

谢谢。

代码来源：https://codesandbox.io/s/currying-fast-d42xp?file=/src/RippleButton/index.tsx

Answer 1

只需将 CSS pointer-events: none; 添加到您的 .ripple。
ripple 不需要任何指针事件，因为它只是用于动画效果目的。