transition.js 4.5 KB

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