antd 按钮加载中_用ant design中的Button的时候 属性ant-click-animating-withou如何取消
antd Button 的代码中,
{...otherProps}
type={htmlType || 'button'}
className={classes}
onClick={this.handleClick}
title={title}
{iconNode}{kids}
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;