水波纹动画

水波纹动画代码

/** 标题头点击波纹事件 */
  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;
  }