Solvedant design Is there any way to disable all animations?
✔️Accepted Answer
If anyone is wondering how to get rid of this clicked (glow fade-out) animation:
Depending on the Ant version:
.ant-btn-clicked:after {
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
or
[ant-click-animating-without-extra-node]:after {
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
Other Answers:
I faced the same situation of modal's transition effect and finally found a cure.
For those who would like to disable the default modal transition effect, simply add the followings:
<Modal
transitionName="none"
maskTransitionName="none"
...
/>
* {
animation-duration: 0s !important;
}
Quick way to do that but aggressive.
This is one of the top results in Google when searching for customizing Antd's button animations.
Instead of putting this info in the official docs, it's here and it doesn't even work? @mattcarlotta 's response doesn't have any effects with the current version of Antd.
Going into the lib and into the CSS for the button component, I see this, which is what dictates the button transition on click:
.ant-btn:focus { color: #40a9ff; background-color: #fff; border-color: #40a9ff; }
First of all, it's bizarre to me that a UI framework would use hardcoded values for styles instead of referencing global theme vars or being able to pass in custom props via the API. From what I can tell, the button animations / transitions are not customizable at all, without overriding the properties with new styles.
To remove the color transition effect when selecting a button, this works (background-color is whatever the original button color is):
.ant-btn:focus, .ant-btn.focus { background-color: red !important; }
And on:hover is the same, but with 'hover' instead of 'focus'.
But something like, changing the color of the button on selection (initial click) and then immediately reverting the color of the button back after the click, would take a lot more digging and overriding, which is way too much effort for a library that's supposed to streamline writing UI components.
True to its description, Antd really is an "enterprise-class" system by being exceptionally inaccessible to customize with hacky and out-of-date solutions for common design requirements.
If anyone comes across this and is looking to disable button animation I accomplished it with the following css override:
.ant-btn.ant-btn-background-ghost::after {
border: none !important;
}
Such as when hover on a table row we don't want the transition of background color, for dropdown list we don't want the popup animation, etc. We'd like a quick response system.