;

};

接下来就是对类名wave和wave-hide进行相应的样式编写了，如下所示：

css

复制代码

.wave {

box-shadow: 0 0 0 5px currentColor;

position: absolute;

background-color: transparent;

pointer-events: none;

box-sizing: border-box;

opacity: 0.2;

transition: box-shadow 2s ease, opacity 2s ease;

}

.wave-hide {

opacity: 0;

box-shadow: 0 0 0 2px currentColor;

}

最终实现的效果如下所示，效果还不错：

按钮涟漪效果

思路引进：除了react开发来常用的组件库就是，一些其他的组件库如varlet也是有比较有特点的按钮点击的反馈效果的，如下图所示点击按钮有一个类似涟漪的效果，今天我们就探讨一下该功能具体是如何实现的：

从f12控制台查看可以看出，当我们点击按钮之后，出现的涟漪效果就是一个div元素，并且该元素是随着涟漪的显示与隐藏同步发生的，当涟漪消失的时候对于的div元素也会被销毁掉：

代码实现：按照上面的这种方式，接下来我们通过代码来实现上面的效果，这里我们借助react框架来实现吧，实现思路就是点击按钮的时候会在点击的地方生成一个小圆圆，然后这个圆圆圈的动画是逐渐放大，不透明度是越来越低然后就模拟成了波纹，最后再把这个按钮剩余的区域隐藏掉即可，实现的代码如下所示：

javascript

复制代码

// 确保容器样式正确

node.style.position = node.style.position || 'relative';

node.style.overflow = 'hidden';

// 定义小波样式

const color = 'rgba(255, 255, 255, 0.3)';

const duration = 1000;

const rect = node.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const ripple = document.createElement('div');

// 应用内联样式

Object.assign(ripple.style, {

position: 'absolute',

width: '2px',

height: '2px',

left: `${x}px`,

top: `${y}px`,

borderRadius: '50%',

backgroundColor: color,

transform: 'scale(0)',

opacity: '1',

pointerEvents: 'none',

transition: `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`

});

node.appendChild(ripple);

// 触发动画

requestAnimationFrame(() => {

const maxDim = Math.max(node.offsetWidth, node.offsetHeight);

ripple.style.transform = `scale(${maxDim * 2})`;

ripple.style.opacity = '0';

});

// 动画结束后移除元素

setTimeout(() => ripple.remove(), duration);

实现的效果如下所示：

封装通用组件

因为这里我们封装的是一个通用组件，所以这里我们可以将上面的按钮效果合并在一起，并通过传递props来确保用户当前要选择哪种按钮反馈效果，如果后期还需加其他按钮效果的话也可以继续在代码上添加，这里定义的props内容如下：

TypeScript

复制代码

import Wave from "./components/button/wave"

const style: React.CSSProperties = {

width: 200,

height: 100,

borderRadius: '10px 0 20px 0',

margin: 100,

backgroundColor: '#1677ff',

outline: 'none',

border: 'none',

}

const App = () => {

return (

<>

ripple点击

wavelet点击

none点击

正常点击

)

}

export default App

这里给出四种情况的点击效果：

为了简化代码，这里我将不再设置class类名而是直接给添加的子元素设置样式style，也就是说代码样式全用js来实现，不再使用单独的css文件来处理样式，也就是说封装的组件就是一个单独的tsx文件，完整代码如下所示：

TypeScript

复制代码

import React, { useEffect, useRef, useState } from 'react';

import ReactDOM from 'react-dom/client';

interface WaveProps {

children: React.ReactNode;

feedback?: 'ripple' | 'wavelet' | 'none' | undefined;

}

// 定义波纹基础样式

const waveBaseStyles: React.CSSProperties = {

boxShadow: '0 0 0 5px currentColor',

position: 'absolute',

backgroundColor: 'transparent',

pointerEvents: 'none',

boxSizing: 'border-box',

opacity: 0.2,

transition: 'box-shadow 2s ease, opacity 2s ease'

};

// 定义波纹隐藏状态样式

const waveHideStyles: React.CSSProperties = {

...waveBaseStyles,

opacity: 0,

boxShadow: '0 0 0 2px currentColor'

};

const WaveEffect: React.FC<{ target: HTMLElement }> = ({ target }) => {

const divRef = useRef(null);

const [style, setStyle] = useState({});

const [isHidden, setIsHidden] = useState(false);

// 颜色验证和获取合并

const getWaveColor = (node: HTMLElement, defaultColor = 'blue') => {

const { borderColor, backgroundColor } = getComputedStyle(node);

const isValid = (color: string) => color && !['transparent',

'#fff', '#ffffff', 'rgba(255, 255, 255, 1)', 'rgb(255, 255, 255)', // 白色系列

'#000', '#000000', 'rgba(0, 0, 0, 1)', 'rgb(0, 0, 0)' // 黑色系列

].includes(color);

return isValid(backgroundColor) ? backgroundColor : isValid(borderColor) ? borderColor : defaultColor;

};

// 同步样式信息

const syncStyle = () => {

const {

position, borderTopWidth, borderLeftWidth,

borderTopLeftRadius, borderTopRightRadius,

borderBottomRightRadius, borderBottomLeftRadius

} = getComputedStyle(target);

// 判断是否为静态定位，如果是则使用偏移量作为top和left值

const isStatic = !position || position === 'static';

setStyle({

width: target.offsetWidth,

height: target.offsetHeight,

top: isStatic ? target.offsetTop : -parseFloat(borderTopWidth),

left: isStatic ? target.offsetLeft : -parseFloat(borderLeftWidth),

color: getWaveColor(target),

borderRadius: [

borderTopLeftRadius, borderTopRightRadius,

borderBottomRightRadius, borderBottomLeftRadius

].join(' ')

});

};

useEffect(() => {

// 监听尺寸变化，同步样式信息

const ob = new ResizeObserver(syncStyle);

ob.observe(target);

// 延迟执行，确保样式已经同步

const id = requestAnimationFrame(() => {

setIsHidden(true);

syncStyle();

});

// 清理函数

return () => {

ob.disconnect();

cancelAnimationFrame(id);

};

}, [target]);

useEffect(() => {

// 监听过渡结束，移除波纹元素

const callback = () => divRef.current?.parentElement?.remove();

const currentRef = divRef.current;

currentRef?.addEventListener('transitionend', callback);

return () => currentRef?.removeEventListener('transitionend', callback);

}, []);

// 合并基础样式、动态样式和隐藏状态样式

const combinedStyles = {

...waveBaseStyles,

...style,

...(isHidden ? waveHideStyles : {})

};

return