mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

tweak wave effect detail

Browse Source
This commit is contained in:
afc163 2018-08-20 23:55:35 +08:00
parent 041173f059
commit 60cff5de40
2 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/_util/wave.tsx
View File

@ -7,6 +7,8 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
cancel: () => void;
};
private extraNode: HTMLDivElement;
private clickWaveTimeoutId: number;
private styleForPesudo: HTMLStyleElement | null;
isNotGrey(color: string) {
@ -17,22 +19,17 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
return true;
}
onClick = (node: HTMLElement) => {
onClick = (node: HTMLElement, waveColor: string) => {
if (node.className.indexOf('-leave') >= 0) {
return;
}
this.removeExtraStyleNode();
const { insertExtraNode } = this.props;
const extraNode = document.createElement('div');
this.extraNode = document.createElement('div');
const extraNode = this.extraNode;
extraNode.className = 'ant-click-animating-node';
const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
const attributeName = this.getAttributeName();
node.removeAttribute(attributeName);
node.setAttribute(attributeName, 'true');
// Get wave color from target
const waveColor =
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
getComputedStyle(node).getPropertyValue('border-color') ||
getComputedStyle(node).getPropertyValue('background-color');
// Not white or transparnt or grey
if (waveColor &&
waveColor !== '#ffffff' &&
@ -49,18 +46,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
if (insertExtraNode) {
node.appendChild(extraNode);
}
const transitionEnd = (e: AnimationEvent) => {
if (e.animationName !== 'fadeEffect') {
return;
}
node.removeAttribute(attributeName);
this.removeExtraStyleNode();
if (insertExtraNode) {
node.removeChild(extraNode);
}
TransitionEvents.removeEndEventListener(node, transitionEnd);
};
TransitionEvents.addEndEventListener(node, transitionEnd);
TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
}
bindAnimationEvent = (node: HTMLElement) => {
@ -73,7 +59,13 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
if ((e.target as HTMLElement).tagName === 'INPUT') {
return;
}
setTimeout(() => this.onClick(node), 0);
this.resetEffect(node);
// Get wave color from target
const waveColor =
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
getComputedStyle(node).getPropertyValue('border-color') ||
getComputedStyle(node).getPropertyValue('background-color');
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
};
node.addEventListener('click', onClick, true);
return {
@ -83,6 +75,29 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
};
}
getAttributeName() {
const { insertExtraNode } = this.props;
return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
}
resetEffect(node: HTMLElement) {
const { insertExtraNode } = this.props;
const attributeName = this.getAttributeName();
node.removeAttribute(attributeName);
this.removeExtraStyleNode();
if (insertExtraNode) {
node.removeChild(this.extraNode);
}
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
}
onTransitionEnd = (e: AnimationEvent) => {
if (e.animationName !== 'fadeEffect') {
return;
}
this.resetEffect(e.target as HTMLElement);
}
removeExtraStyleNode() {
if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
document.body.removeChild(this.styleForPesudo);
@ -98,6 +113,9 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
if (this.instance) {
this.instance.cancel();
}
if (this.clickWaveTimeoutId) {
clearTimeout(this.clickWaveTimeoutId);
}
}
render() {

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

@ -19,8 +19,8 @@
right: -1px;
border-radius: inherit;
border: 0 solid @primary-color;
opacity: 0.16;
animation: fadeEffect 2.2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
opacity: 0.2;
animation: fadeEffect 2.4s @ease-out-circ, waveEffect .48s @ease-out-circ;
animation-fill-mode: forwards;
display: block;
}