mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

improve click effect ⭐

Browse Source
This commit is contained in:
afc163 2018-08-20 20:59:48 +08:00
parent e610830a1a
commit 5e37710ecb
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/wave.tsx
View File

@ -49,7 +49,10 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
if (insertExtraNode) {
node.appendChild(extraNode);
}
const transitionEnd = () => {
const transitionEnd = (e: AnimationEvent) => {
if (e.animationName !== 'fadeEffect') {
return;
}
node.removeAttribute(attributeName);
this.removeExtraStyleNode();
if (insertExtraNode) {

14
components/style/core/motion/other.less
View File

@ -19,14 +19,14 @@
right: -1px;
border-radius: inherit;
border: 0 solid @primary-color;
opacity: 0.4;
animation: waveEffect .4s cubic-bezier(.25, .8, .25, 1);
opacity: 0.2;
animation: fadeEffect 2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
animation-fill-mode: forwards;
display: block;
}
@keyframes waveEffect {
to {
opacity: 0;
100% {
top: -@wave-animation-width;
left: -@wave-animation-width;
bottom: -@wave-animation-width;
@ -34,3 +34,9 @@
border-width: @wave-animation-width;
}
}
@keyframes fadeEffect {
100% {
opacity: 0;
}
}