slide.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.slideUpOut = exports.slideUpIn = exports.slideRightOut = exports.slideRightIn = exports.slideLeftOut = exports.slideLeftIn = exports.slideDownOut = exports.slideDownIn = exports.initSlideMotion = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _motion = require("./motion");
  8. const slideUpIn = exports.slideUpIn = new _cssinjs.Keyframes('antSlideUpIn', {
  9. '0%': {
  10. transform: 'scaleY(0.8)',
  11. transformOrigin: '0% 0%',
  12. opacity: 0
  13. },
  14. '100%': {
  15. transform: 'scaleY(1)',
  16. transformOrigin: '0% 0%',
  17. opacity: 1
  18. }
  19. });
  20. const slideUpOut = exports.slideUpOut = new _cssinjs.Keyframes('antSlideUpOut', {
  21. '0%': {
  22. transform: 'scaleY(1)',
  23. transformOrigin: '0% 0%',
  24. opacity: 1
  25. },
  26. '100%': {
  27. transform: 'scaleY(0.8)',
  28. transformOrigin: '0% 0%',
  29. opacity: 0
  30. }
  31. });
  32. const slideDownIn = exports.slideDownIn = new _cssinjs.Keyframes('antSlideDownIn', {
  33. '0%': {
  34. transform: 'scaleY(0.8)',
  35. transformOrigin: '100% 100%',
  36. opacity: 0
  37. },
  38. '100%': {
  39. transform: 'scaleY(1)',
  40. transformOrigin: '100% 100%',
  41. opacity: 1
  42. }
  43. });
  44. const slideDownOut = exports.slideDownOut = new _cssinjs.Keyframes('antSlideDownOut', {
  45. '0%': {
  46. transform: 'scaleY(1)',
  47. transformOrigin: '100% 100%',
  48. opacity: 1
  49. },
  50. '100%': {
  51. transform: 'scaleY(0.8)',
  52. transformOrigin: '100% 100%',
  53. opacity: 0
  54. }
  55. });
  56. const slideLeftIn = exports.slideLeftIn = new _cssinjs.Keyframes('antSlideLeftIn', {
  57. '0%': {
  58. transform: 'scaleX(0.8)',
  59. transformOrigin: '0% 0%',
  60. opacity: 0
  61. },
  62. '100%': {
  63. transform: 'scaleX(1)',
  64. transformOrigin: '0% 0%',
  65. opacity: 1
  66. }
  67. });
  68. const slideLeftOut = exports.slideLeftOut = new _cssinjs.Keyframes('antSlideLeftOut', {
  69. '0%': {
  70. transform: 'scaleX(1)',
  71. transformOrigin: '0% 0%',
  72. opacity: 1
  73. },
  74. '100%': {
  75. transform: 'scaleX(0.8)',
  76. transformOrigin: '0% 0%',
  77. opacity: 0
  78. }
  79. });
  80. const slideRightIn = exports.slideRightIn = new _cssinjs.Keyframes('antSlideRightIn', {
  81. '0%': {
  82. transform: 'scaleX(0.8)',
  83. transformOrigin: '100% 0%',
  84. opacity: 0
  85. },
  86. '100%': {
  87. transform: 'scaleX(1)',
  88. transformOrigin: '100% 0%',
  89. opacity: 1
  90. }
  91. });
  92. const slideRightOut = exports.slideRightOut = new _cssinjs.Keyframes('antSlideRightOut', {
  93. '0%': {
  94. transform: 'scaleX(1)',
  95. transformOrigin: '100% 0%',
  96. opacity: 1
  97. },
  98. '100%': {
  99. transform: 'scaleX(0.8)',
  100. transformOrigin: '100% 0%',
  101. opacity: 0
  102. }
  103. });
  104. const slideMotion = {
  105. 'slide-up': {
  106. inKeyframes: slideUpIn,
  107. outKeyframes: slideUpOut
  108. },
  109. 'slide-down': {
  110. inKeyframes: slideDownIn,
  111. outKeyframes: slideDownOut
  112. },
  113. 'slide-left': {
  114. inKeyframes: slideLeftIn,
  115. outKeyframes: slideLeftOut
  116. },
  117. 'slide-right': {
  118. inKeyframes: slideRightIn,
  119. outKeyframes: slideRightOut
  120. }
  121. };
  122. const initSlideMotion = (token, motionName) => {
  123. const {
  124. antCls
  125. } = token;
  126. const motionCls = `${antCls}-${motionName}`;
  127. const {
  128. inKeyframes,
  129. outKeyframes
  130. } = slideMotion[motionName];
  131. return [(0, _motion.initMotion)(motionCls, inKeyframes, outKeyframes, token.motionDurationMid), {
  132. [`
  133. ${motionCls}-enter,
  134. ${motionCls}-appear
  135. `]: {
  136. transform: 'scale(0)',
  137. transformOrigin: '0% 0%',
  138. opacity: 0,
  139. animationTimingFunction: token.motionEaseOutQuint,
  140. '&-prepare': {
  141. transform: 'scale(1)'
  142. }
  143. },
  144. [`${motionCls}-leave`]: {
  145. animationTimingFunction: token.motionEaseInQuint
  146. }
  147. }];
  148. };
  149. exports.initSlideMotion = initSlideMotion;