@aimake/nanod
Version:
## 设计模式 NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用,应用于各产品中从而产出了一套设计及前端规范。
51 lines (47 loc) • 1.28 kB
JavaScript
import cssAnimation from 'css-animation';
import raf from 'raf';
function animate(node, show, done) {
var height;
var requestAnimationFrameId;
return cssAnimation(node, 'ant-motion-collapse', {
start: function start() {
if (!show) {
node.style.height = "".concat(node.offsetHeight, "px");
node.style.opacity = '1';
} else {
height = node.offsetHeight;
node.style.height = '0px';
node.style.opacity = '0';
}
},
active: function active() {
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
}
requestAnimationFrameId = raf(function () {
node.style.height = "".concat(show ? height : 0, "px");
node.style.opacity = show ? '1' : '0';
});
},
end: function end() {
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
}
node.style.height = '';
node.style.opacity = '';
done();
}
});
}
var animation = {
enter: function enter(node, done) {
return animate(node, true, done);
},
leave: function leave(node, done) {
return animate(node, false, done);
},
appear: function appear(node, done) {
return animate(node, true, done);
}
};
export default animation;