transition.js 5.3 KB

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