motion.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. const getMoveTranslate = direction => {
  7. const value = '100%';
  8. return {
  9. left: `translateX(-${value})`,
  10. right: `translateX(${value})`,
  11. top: `translateY(-${value})`,
  12. bottom: `translateY(${value})`
  13. }[direction];
  14. };
  15. const getEnterLeaveStyle = (startStyle, endStyle) => ({
  16. '&-enter, &-appear': Object.assign(Object.assign({}, startStyle), {
  17. '&-active': endStyle
  18. }),
  19. '&-leave': Object.assign(Object.assign({}, endStyle), {
  20. '&-active': startStyle
  21. })
  22. });
  23. const getFadeStyle = (from, duration) => Object.assign({
  24. '&-enter, &-appear, &-leave': {
  25. '&-start': {
  26. transition: 'none'
  27. },
  28. '&-active': {
  29. transition: `all ${duration}`
  30. }
  31. }
  32. }, getEnterLeaveStyle({
  33. opacity: from
  34. }, {
  35. opacity: 1
  36. }));
  37. const getPanelMotionStyles = (direction, duration) => [getFadeStyle(0.7, duration), getEnterLeaveStyle({
  38. transform: getMoveTranslate(direction)
  39. }, {
  40. transform: 'none'
  41. })];
  42. const genMotionStyle = token => {
  43. const {
  44. componentCls,
  45. motionDurationSlow
  46. } = token;
  47. return {
  48. [componentCls]: {
  49. // ======================== Mask ========================
  50. [`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),
  51. // ======================= Panel ========================
  52. [`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce((obj, direction) => Object.assign(Object.assign({}, obj), {
  53. [`&-${direction}`]: getPanelMotionStyles(direction, motionDurationSlow)
  54. }), {})
  55. }
  56. };
  57. };
  58. var _default = exports.default = genMotionStyle;