ant-design/components/_util/openAnimation.tsx

53 lines
1.3 KiB
TypeScript
Raw Normal View History

2016-03-30 16:27:14 +08:00
import cssAnimation from 'css-animation';
2017-02-26 19:08:36 +08:00
import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
const reqAnimFrame = getRequestAnimationFrame();
2015-08-25 11:11:21 +08:00
2016-03-30 16:27:14 +08:00
function animate(node, show, done) {
let height;
2017-02-26 19:08:36 +08:00
let requestAnimationFrameId;
2016-03-30 16:27:14 +08:00
return cssAnimation(node, 'ant-motion-collapse', {
start() {
if (!show) {
node.style.height = `${node.offsetHeight}px`;
node.style.opacity = 1;
2016-03-30 16:27:14 +08:00
} else {
height = node.offsetHeight;
node.style.height = 0;
node.style.opacity = 0;
2016-03-30 16:27:14 +08:00
}
},
active() {
2017-02-26 19:08:36 +08:00
if (requestAnimationFrameId) {
cancelRequestAnimationFrame(requestAnimationFrameId);
}
requestAnimationFrameId = reqAnimFrame(() => {
node.style.height = `${show ? height : 0}px`;
node.style.opacity = show ? 1 : 0;
});
2016-03-30 16:27:14 +08:00
},
end() {
2017-02-26 19:08:36 +08:00
if (requestAnimationFrameId) {
cancelRequestAnimationFrame(requestAnimationFrameId);
}
2016-03-30 16:27:14 +08:00
node.style.height = '';
node.style.opacity = '';
2015-08-25 11:11:21 +08:00
done();
2016-03-30 16:27:14 +08:00
},
2015-08-25 11:11:21 +08:00
});
}
const animation = {
enter(node, done) {
2016-03-30 16:27:14 +08:00
return animate(node, true, done);
2015-08-25 11:11:21 +08:00
},
leave(node, done) {
2016-03-30 16:27:14 +08:00
return animate(node, false, done);
2015-08-25 11:11:21 +08:00
},
appear(node, done) {
2016-03-30 16:27:14 +08:00
return animate(node, true, done);
2015-08-25 11:11:21 +08:00
},
};
export default animation;