transition.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.getTransitionProps = exports.getTransitionName = exports.getTransitionGroupProps = exports.getTransitionDirection = exports.collapseMotion = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _vue = require("vue");
  9. var _type = require("./type");
  10. const SelectPlacements = (0, _type.tuple)('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
  11. const getTransitionDirection = placement => {
  12. if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
  13. return `slide-down`;
  14. }
  15. return `slide-up`;
  16. };
  17. exports.getTransitionDirection = getTransitionDirection;
  18. const getTransitionProps = function (transitionName) {
  19. let opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  20. const transitionProps = transitionName ? (0, _extends2.default)({
  21. name: transitionName,
  22. appear: true,
  23. // type: 'animation',
  24. // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
  25. // appearActiveClass: `antdv-base-transtion`,
  26. // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
  27. enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare ${transitionName}-enter-start`,
  28. enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
  29. enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
  30. leaveFromClass: ` ${transitionName}-leave`,
  31. leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
  32. leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`
  33. }, opt) : (0, _extends2.default)({
  34. css: false
  35. }, opt);
  36. return transitionProps;
  37. };
  38. exports.getTransitionProps = getTransitionProps;
  39. const getTransitionGroupProps = function (transitionName) {
  40. let opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  41. const transitionProps = transitionName ? (0, _extends2.default)({
  42. name: transitionName,
  43. appear: true,
  44. // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
  45. appearActiveClass: `${transitionName}`,
  46. appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
  47. enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
  48. enterActiveClass: `${transitionName}`,
  49. enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
  50. leaveActiveClass: `${transitionName} ${transitionName}-leave`,
  51. leaveToClass: `${transitionName}-leave-active`
  52. }, opt) : (0, _extends2.default)({
  53. css: false
  54. }, opt);
  55. return transitionProps;
  56. };
  57. // ================== Collapse Motion ==================
  58. exports.getTransitionGroupProps = getTransitionGroupProps;
  59. const getCollapsedHeight = () => ({
  60. height: 0,
  61. opacity: 0
  62. });
  63. const getRealHeight = node => ({
  64. height: `${node.scrollHeight}px`,
  65. opacity: 1
  66. });
  67. const getCurrentHeight = node => ({
  68. height: `${node.offsetHeight}px`
  69. });
  70. const collapseMotion = function () {
  71. let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ant-motion-collapse';
  72. let style = arguments.length > 1 ? arguments[1] : undefined;
  73. let className = arguments.length > 2 ? arguments[2] : undefined;
  74. return {
  75. name,
  76. appear: true,
  77. css: true,
  78. onBeforeEnter: node => {
  79. className.value = name;
  80. style.value = getCollapsedHeight(node);
  81. },
  82. onEnter: node => {
  83. (0, _vue.nextTick)(() => {
  84. style.value = getRealHeight(node);
  85. });
  86. },
  87. onAfterEnter: () => {
  88. className.value = '';
  89. style.value = {};
  90. },
  91. onBeforeLeave: node => {
  92. className.value = name;
  93. style.value = getCurrentHeight(node);
  94. },
  95. onLeave: node => {
  96. setTimeout(() => {
  97. style.value = getCollapsedHeight(node);
  98. });
  99. },
  100. onAfterLeave: () => {
  101. className.value = '';
  102. style.value = {};
  103. }
  104. };
  105. };
  106. exports.collapseMotion = collapseMotion;
  107. const getTransitionName = (rootPrefixCls, motion, transitionName) => {
  108. if (transitionName !== undefined) {
  109. return transitionName;
  110. }
  111. return `${rootPrefixCls}-${motion}`;
  112. };
  113. exports.getTransitionName = getTransitionName;