21 lines
856 B
TypeScript
21 lines
856 B
TypeScript
|
export const useRipple = (e: Event, isRipple: boolean): void => {
|
||
|
|
if (isRipple) {
|
||
|
|
const initElelemnt = e.currentTarget as HTMLElement;
|
||
|
|
initElelemnt.style.position = 'relative';
|
||
|
|
const rippleElement = document.createElement('span');
|
||
|
|
rippleElement.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
|
||
|
|
rippleElement.style.width = '100%';
|
||
|
|
rippleElement.style.height = '100%';
|
||
|
|
rippleElement.style.position = 'absolute';
|
||
|
|
rippleElement.style.left = '0';
|
||
|
|
rippleElement.style.top = '0';
|
||
|
|
rippleElement.style.transform = 'scaleX(0)';
|
||
|
|
|
||
|
|
initElelemnt.appendChild(rippleElement);
|
||
|
|
|
||
|
|
rippleElement.animate([{ transform: 'scaleX(1)', opacity: 0 }], { duration: 500 }).addEventListener('finish', () => {
|
||
|
|
initElelemnt.removeChild(rippleElement);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|