Button 点击效果

click光晕效果
ant-click-animating-withou

Wave 实现了这个光晕效果
Wave 组件会在点击的时候给 Button 组件加上 ant-click-animating-without-extra-node，
css 代码给有这个属性的元素加上了这个光晕效果

<Wave>
  <button
    {...otherProps}
    type={htmlType || 'button'}
    className={classes}
    onClick={this.handleClick}
    title={title}
  >
    {iconNode}{kids}
  </button>
</Wave>

css代码

[ant-click-animating],
[ant-click-animating-without-extra-node] {
  position: relative;
}
[ant-click-animating-without-extra-node]:after,
.ant-click-animating-node {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  border-radius: inherit;
  border: 0 solid #1890ff;
  opacity: 0.2;
  -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
          animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  display: block;
  pointer-events: none;
}
@-webkit-keyframes waveEffect {
  100% {
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-width: 6px;
  }
}
@keyframes waveEffect {
  100% {
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-width: 6px;
  }
}
@-webkit-keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}
@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

删除光晕效果

在不修改 antd 源码的情况下，ant-click-animating-without-extra-node 这个属性是去不掉的，
只有通过 css 去掉这个效果

button[ant-click-animating-without-extra-node]:after {
  border: 0 none;
  opacity: 0;
  animation:none 0 ease 0 1 normal;
}

https://juejin.cn/post/7064404257436336135