UNPKG

@aimake/nanod

Version:

## 设计模式 NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用,应用于各产品中从而产出了一套设计及前端规范。

51 lines (47 loc) 1.28 kB
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;