when you use Button in ant design, each click adds a property ant-click-animating-withou to the view button, which is how to cancel or trigger a glowing object every time you click button. Neither outline nor box-shadow can be canceled.
when you use Button in ant design, each click adds a property ant-click-animating-withou to the view button, which is how to cancel or trigger a glowing object every time you click button. Neither outline nor box-shadow can be canceled.
in the code of antd Button,
<Wave>
<button
{...otherProps}
type={htmlType || 'button'}
className={classes}
onClick={this.handleClick}
title={title}
>
{iconNode}{kids}
</button>
</Wave> Wave achieves this halo effect. The attribute ant-click-animating-without-extra-node cannot be removed without modifying the antd source code, and this effect can only be removed through css.
the following is the original css code:
[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 -sharp1890ff;
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;
}
}can be overridden with the following code:
button[ant-click-animating-without-extra-node]:after {
border: 0 none;
opacity: 0;
animation:none 0 ease 0 1 normal;
}@ wave-animation-width: 0;
Previous: [antd] how is the returned result of Upload bound to List Item?
Next: Some hidden processes often appear in the server, and others will appear after killing them.
setting in state: this.state = {checkList: []}; checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount}); checkSavaCount is the same length as the following JsonPage. the following creates...
use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...
tried all three methods: ...
...
Item in Ali s antd-mobile List component has an extra attribute, which can only be put in text, but my text requires a link, as shown in the following figure, how to achieve it? { this.props.list.map((item, index) => { ...
official example of full copy: this is the official sample code: import { Select } from antd ; const Option = Select.Option; function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <div> <Select defaul...
use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
I define an array in js. does anyone know, thank you ...
The structure of the data is like this, and you need to use this to generate a form like this { name: , groups: [ { groupName: , state: 1, 1 0 isOpen: 1, 1 0 ...
axios.post ( api php user findPsw.json ,params). Then ((res) = > {) var jsonObj = JSON.stringify(res.data) var jsonTemp="[{" var checkPsw = jsonObj.substring(jsonObj.indexOf("password")+11,jsonObj.indexOf(...
Test antd document Form in the demo code const {getFieldDecorator} = this.props.form; reported an error, found that their antd version is too low, so npm install antd@beta-save installed the latest version of antd, but my project Divider reported that th...
the initial permissions in ant-design-pro are obtained from Synchronize in localstorage (. src utils authority.js). The permission information obtained is used to determine the jump of the page (whether to jump to the login page). I want to obtain perm...
when looking at the official instance of antd, if you see that the value of the setState method is a first-level deep copy of the original state, it will render immediately (I don t know if it means a deep copy here) see the asynchronous loading inst...
thousands of pieces of data returned by the background interface are put in the Select. Users select a certain piece of data and find it very stuttered. Is there any way to solve it ? this is the official demo of antd const { Select } = antd; const Op...
question: the antd, used defines a model component and a form component. The form component is a child component of the model component. In the parent component app, use the component model, to get the form data of the child component when you want t...
https: ant.design can anyone open it? Several of my colleagues said that I could not open ....
The form has a start and end date, which requires context. How can it be cross-validated? the problem I encountered is: step1: first set the start date to 3br 23 step2: sets the end as scheduled to 3x21, the end date component verification prompt "c...
:this.state={key1:value1,key2:value2}, :this.state={key1:value1,key2:value2,key3:value3} statekey3:value3, this.statepush(),this.state.push(key3,value3) this.state={key1:value1,key2:value2,key3:value3} this.statepush() this.state ...
use the drop-down box of React s ant design, and ask for help on how to solve the problem according to the fact that there is no multiple selection in the doc, on the official website. <Select multiple showSearch onSelect={(val,e) =&g...
there is no problem with the local configuration of ant design pro,. The search items in tablelist are often misplaced, and the drop-down items are not fully displayed. It will be fine after refreshing. If you enter the page for the first time, there wil...