/
AnimateChild.js
82 lines (74 loc) · 2.14 KB
/
AnimateChild.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* eslint react/prop-types: 0 */
import React from 'react';
import ReactDOM from 'react-dom';
import cssAnimate, { isCssAnimationSupported } from '@ant-design/css-animation';
import animUtil from './util/animate';
const transitionMap = {
enter: 'transitionEnter',
appear: 'transitionAppear',
leave: 'transitionLeave',
};
export default class AnimateChild extends React.Component {
componentWillUnmount() {
this.stop();
}
componentWillEnter(done) {
if (animUtil.isEnterSupported(this.props)) {
this.transition('enter', done);
} else {
done();
}
}
componentWillAppear(done) {
if (animUtil.isAppearSupported(this.props)) {
this.transition('appear', done);
} else {
done();
}
}
componentWillLeave(done) {
if (animUtil.isLeaveSupported(this.props)) {
this.transition('leave', done);
} else {
// always sync, do not interupt with react component life cycle
// update hidden -> animate hidden ->
// didUpdate -> animate leave -> unmount (if animate is none)
done();
}
}
transition(animationType, finishCallback) {
const node = ReactDOM.findDOMNode(this);
const props = this.props;
const transitionName = props.transitionName;
const nameIsObj = typeof transitionName === 'object';
this.stop();
const end = () => {
this.stopper = null;
finishCallback();
};
if ((isCssAnimationSupported || !props.animation[animationType]) &&
transitionName && props[transitionMap[animationType]]) {
const name = nameIsObj ? transitionName[animationType] : `${transitionName}-${animationType}`;
let activeName = `${name}-active`;
if (nameIsObj && transitionName[`${animationType}Active`]) {
activeName = transitionName[`${animationType}Active`];
}
this.stopper = cssAnimate(node, {
name,
active: activeName,
}, end);
} else {
this.stopper = props.animation[animationType](node, end);
}
}
stop() {
const stopper = this.stopper;
if (stopper) {
this.stopper = null;
stopper.stop();
}
}
render() {
return this.props.children;
}
}