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

Fix unexpected wave animation on hidden elements

Browse Source 
close #12967
This commit is contained in:
afc163 2018-11-08 12:33:56 +08:00
parent 4763a51dc8
commit a8d2a0a8c1
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/_util/wave.tsx
View File

@ -4,6 +4,11 @@ import TransitionEvents from 'css-animation/lib/Event';
let styleForPesudo: HTMLStyleElement | null;
// Where el is the DOM element you'd like to test for visibility
function isHidden(element: HTMLElement) {
return !element || element.offsetParent === null;
}
export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
private instance?: {
cancel: () => void;
@ -21,7 +26,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
}
onClick = (node: HTMLElement, waveColor: string) => {
if (!node || node.className.indexOf('-leave') >= 0) {
if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
return;
}
const { insertExtraNode } = this.props;
@ -61,7 +66,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
}
const onClick = (e: MouseEvent) => {
// Fix radio button click twice
if ((e.target as HTMLElement).tagName === 'INPUT') {
if ((e.target as HTMLElement).tagName === 'INPUT' || isHidden(e.target as HTMLElement)) {
return;
}
this.resetEffect(node);