水波纹动画代码
/** 标题头点击波纹事件 */
private titleButtonClick = (event: any) => {
const eventTarget = event.target;
const leftX = event.pageX - this.getLeft(eventTarget);
const topY = event.pageY - this.getTop(eventTarget);
const waveNode = eventTarget.lastChild;
if (waveNode && waveNode.hasAttribute("wave")) { eventTarget.removeChild(waveNode); }
const iNode = document.createElement("i");
iNode.setAttribute("wave", "node");
iNode.style.position = "absolute";
iNode.style.left = `${leftX}px`;
iNode.style.top = `${topY}px`;
iNode.style.pointerEvents = "none";
iNode.style.height = "4px";
iNode.style.width = "4px";
iNode.style.opacity = "0.01";
iNode.style.borderRadius = "50%";
iNode.style.animation = "wavingAnimate 0.6s ease-in";
iNode.style.background = "rgba(117,240,255, 0.2)";
eventTarget.appendChild(iNode);
this.props.onTitleClick && this.props.onTitleClick(this.props.title);
}
获取元素相对位置
/** 获取元素的相对高度 */
getTop = (event: any) => {
let offset = event.offsetTop;
if (event.offsetParent !== null) offset += this.getTop(event.offsetParent);
return offset;
}
/** 获取元素的相对左偏移 */
getLeft = (event: any) => {
let offset = event.offsetLeft;
if (event.offsetParent !== null) offset += this.getLeft(event.offsetParent);
return offset;
}