用ant design中的Button的时候 属性ant-click-animating-withou如何取消

Question

用ant design中的Button的时候 每次点击都会在视图button上添加一个属性ant-click-animating-withou 这个属性如何才能取消 或者说 每次点击button的时候 都会触发一层光晕式的对象 不管是重新设置outline或许box-shadow都无法取消

Answer 1

antd Button 的代码中，

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

Wave 实现了这个光晕效果。在不修改 antd 源码的情况下，ant-click-animating-without-extra-node 这个属性是去不掉的，只有通过 css 去掉这个效果。
以下是 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;
  }
}

可以用以下代码覆盖:

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

Answer 2

@wave-animation-width: 0;