zoom.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.zoomUpOut = exports.zoomUpIn = exports.zoomRightOut = exports.zoomRightIn = exports.zoomOut = exports.zoomLeftOut = exports.zoomLeftIn = exports.zoomIn = exports.zoomDownOut = exports.zoomDownIn = exports.zoomBigOut = exports.zoomBigIn = exports.initZoomMotion = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _motion = require("./motion");
  8. const zoomIn = exports.zoomIn = new _cssinjs.Keyframes('antZoomIn', {
  9. '0%': {
  10. transform: 'scale(0.2)',
  11. opacity: 0
  12. },
  13. '100%': {
  14. transform: 'scale(1)',
  15. opacity: 1
  16. }
  17. });
  18. const zoomOut = exports.zoomOut = new _cssinjs.Keyframes('antZoomOut', {
  19. '0%': {
  20. transform: 'scale(1)'
  21. },
  22. '100%': {
  23. transform: 'scale(0.2)',
  24. opacity: 0
  25. }
  26. });
  27. const zoomBigIn = exports.zoomBigIn = new _cssinjs.Keyframes('antZoomBigIn', {
  28. '0%': {
  29. transform: 'scale(0.8)',
  30. opacity: 0
  31. },
  32. '100%': {
  33. transform: 'scale(1)',
  34. opacity: 1
  35. }
  36. });
  37. const zoomBigOut = exports.zoomBigOut = new _cssinjs.Keyframes('antZoomBigOut', {
  38. '0%': {
  39. transform: 'scale(1)'
  40. },
  41. '100%': {
  42. transform: 'scale(0.8)',
  43. opacity: 0
  44. }
  45. });
  46. const zoomUpIn = exports.zoomUpIn = new _cssinjs.Keyframes('antZoomUpIn', {
  47. '0%': {
  48. transform: 'scale(0.8)',
  49. transformOrigin: '50% 0%',
  50. opacity: 0
  51. },
  52. '100%': {
  53. transform: 'scale(1)',
  54. transformOrigin: '50% 0%'
  55. }
  56. });
  57. const zoomUpOut = exports.zoomUpOut = new _cssinjs.Keyframes('antZoomUpOut', {
  58. '0%': {
  59. transform: 'scale(1)',
  60. transformOrigin: '50% 0%'
  61. },
  62. '100%': {
  63. transform: 'scale(0.8)',
  64. transformOrigin: '50% 0%',
  65. opacity: 0
  66. }
  67. });
  68. const zoomLeftIn = exports.zoomLeftIn = new _cssinjs.Keyframes('antZoomLeftIn', {
  69. '0%': {
  70. transform: 'scale(0.8)',
  71. transformOrigin: '0% 50%',
  72. opacity: 0
  73. },
  74. '100%': {
  75. transform: 'scale(1)',
  76. transformOrigin: '0% 50%'
  77. }
  78. });
  79. const zoomLeftOut = exports.zoomLeftOut = new _cssinjs.Keyframes('antZoomLeftOut', {
  80. '0%': {
  81. transform: 'scale(1)',
  82. transformOrigin: '0% 50%'
  83. },
  84. '100%': {
  85. transform: 'scale(0.8)',
  86. transformOrigin: '0% 50%',
  87. opacity: 0
  88. }
  89. });
  90. const zoomRightIn = exports.zoomRightIn = new _cssinjs.Keyframes('antZoomRightIn', {
  91. '0%': {
  92. transform: 'scale(0.8)',
  93. transformOrigin: '100% 50%',
  94. opacity: 0
  95. },
  96. '100%': {
  97. transform: 'scale(1)',
  98. transformOrigin: '100% 50%'
  99. }
  100. });
  101. const zoomRightOut = exports.zoomRightOut = new _cssinjs.Keyframes('antZoomRightOut', {
  102. '0%': {
  103. transform: 'scale(1)',
  104. transformOrigin: '100% 50%'
  105. },
  106. '100%': {
  107. transform: 'scale(0.8)',
  108. transformOrigin: '100% 50%',
  109. opacity: 0
  110. }
  111. });
  112. const zoomDownIn = exports.zoomDownIn = new _cssinjs.Keyframes('antZoomDownIn', {
  113. '0%': {
  114. transform: 'scale(0.8)',
  115. transformOrigin: '50% 100%',
  116. opacity: 0
  117. },
  118. '100%': {
  119. transform: 'scale(1)',
  120. transformOrigin: '50% 100%'
  121. }
  122. });
  123. const zoomDownOut = exports.zoomDownOut = new _cssinjs.Keyframes('antZoomDownOut', {
  124. '0%': {
  125. transform: 'scale(1)',
  126. transformOrigin: '50% 100%'
  127. },
  128. '100%': {
  129. transform: 'scale(0.8)',
  130. transformOrigin: '50% 100%',
  131. opacity: 0
  132. }
  133. });
  134. const zoomMotion = {
  135. zoom: {
  136. inKeyframes: zoomIn,
  137. outKeyframes: zoomOut
  138. },
  139. 'zoom-big': {
  140. inKeyframes: zoomBigIn,
  141. outKeyframes: zoomBigOut
  142. },
  143. 'zoom-big-fast': {
  144. inKeyframes: zoomBigIn,
  145. outKeyframes: zoomBigOut
  146. },
  147. 'zoom-left': {
  148. inKeyframes: zoomLeftIn,
  149. outKeyframes: zoomLeftOut
  150. },
  151. 'zoom-right': {
  152. inKeyframes: zoomRightIn,
  153. outKeyframes: zoomRightOut
  154. },
  155. 'zoom-up': {
  156. inKeyframes: zoomUpIn,
  157. outKeyframes: zoomUpOut
  158. },
  159. 'zoom-down': {
  160. inKeyframes: zoomDownIn,
  161. outKeyframes: zoomDownOut
  162. }
  163. };
  164. const initZoomMotion = (token, motionName) => {
  165. const {
  166. antCls
  167. } = token;
  168. const motionCls = `${antCls}-${motionName}`;
  169. const {
  170. inKeyframes,
  171. outKeyframes
  172. } = zoomMotion[motionName];
  173. return [(0, _motion.initMotion)(motionCls, inKeyframes, outKeyframes, motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid), {
  174. [`
  175. ${motionCls}-enter,
  176. ${motionCls}-appear
  177. `]: {
  178. transform: 'scale(0)',
  179. opacity: 0,
  180. animationTimingFunction: token.motionEaseOutCirc,
  181. '&-prepare': {
  182. transform: 'none'
  183. }
  184. },
  185. [`${motionCls}-leave`]: {
  186. animationTimingFunction: token.motionEaseInOutCirc
  187. }
  188. }];
  189. };
  190. exports.initZoomMotion = initZoomMotion;