如何移除按钮蚂蚁设计的防点击动画

Question

点击按钮后，按钮周围有动画。所以我想把它关掉，我试着为元素和伪类设置CSS，但它不起作用。

.ant-switch,
.ant-switch:focus,
.ant-switch:active {
border-color: white !important;
box-shadow: none !important;
outline: unset;
}

我代码:

import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';
const RSwitch = styled(Switch)`
background-color: ${props => props.backgroundcolor};
.ant-switch-handle::before {
background-color: #9b9b9b;
right: 0;
}
&[aria-checked='true'] {
.ant-switch-handle {
::before {
background-color: ${props => props.color};
}
}
}
`;
export default function SwitchComponent({
onChange,
checked,
color = '#00afdb',
backgroundColor = ''
}) {
return (
<RSwitch
onChange={onChange}
checked={checked}
size="small"
color={color}
backgroundcolor={backgroundColor}
/>
);
}

ant switch picture

switch的HTML

Answer 1

我用这个解决方案修复了它创建一个按钮。更少的文件在你的ant覆盖，并把它放在

[ant-click-animating-without-extra-node='true']::after{display:none;}

，它会像一个魅力。

Answer 2

我意识到这只是一个div标签，所以我不显示它。如果大家有更好的解决办法，请告诉我。

.ant-click-animating-node {
display: none;
}

Answer 3

.ant-btn {
&::after {
all: unset;
}
}