collapseMotion.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { nextTick } from 'vue';
  2. import { addClass, removeClass } from '../vc-util/Dom/class';
  3. const collapseMotion = function () {
  4. let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ant-motion-collapse';
  5. let appear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  6. return {
  7. name,
  8. appear,
  9. css: true,
  10. onBeforeEnter: node => {
  11. node.style.height = '0px';
  12. node.style.opacity = '0';
  13. addClass(node, name);
  14. },
  15. onEnter: node => {
  16. nextTick(() => {
  17. node.style.height = `${node.scrollHeight}px`;
  18. node.style.opacity = '1';
  19. });
  20. },
  21. onAfterEnter: node => {
  22. if (node) {
  23. removeClass(node, name);
  24. node.style.height = null;
  25. node.style.opacity = null;
  26. }
  27. },
  28. onBeforeLeave: node => {
  29. addClass(node, name);
  30. node.style.height = `${node.offsetHeight}px`;
  31. node.style.opacity = null;
  32. },
  33. onLeave: node => {
  34. setTimeout(() => {
  35. node.style.height = '0px';
  36. node.style.opacity = '0';
  37. });
  38. },
  39. onAfterLeave: node => {
  40. if (node) {
  41. removeClass(node, name);
  42. if (node.style) {
  43. node.style.height = null;
  44. node.style.opacity = null;
  45. }
  46. }
  47. }
  48. };
  49. };
  50. export default collapseMotion;