motion.js 1.5 KB

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