motion.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { Keyframes } from '@ant-design/cssinjs';
  2. import { initFadeMotion } from '../../style/motion';
  3. // =========================== Motion ===========================
  4. const genMotionStyle = token => {
  5. const {
  6. componentCls
  7. } = token;
  8. const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
  9. from: {
  10. width: 0,
  11. height: 0,
  12. padding: 0,
  13. opacity: 0,
  14. margin: token.calc(token.marginXS).div(-2).equal()
  15. }
  16. });
  17. const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
  18. to: {
  19. width: 0,
  20. height: 0,
  21. padding: 0,
  22. opacity: 0,
  23. margin: token.calc(token.marginXS).div(-2).equal()
  24. }
  25. });
  26. const inlineCls = `${componentCls}-animate-inline`;
  27. return [{
  28. [`${componentCls}-wrapper`]: {
  29. [`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
  30. animationDuration: token.motionDurationSlow,
  31. animationTimingFunction: token.motionEaseInOutCirc,
  32. animationFillMode: 'forwards'
  33. },
  34. [`${inlineCls}-appear, ${inlineCls}-enter`]: {
  35. animationName: uploadAnimateInlineIn
  36. },
  37. [`${inlineCls}-leave`]: {
  38. animationName: uploadAnimateInlineOut
  39. }
  40. }
  41. }, {
  42. [`${componentCls}-wrapper`]: initFadeMotion(token)
  43. }, uploadAnimateInlineIn, uploadAnimateInlineOut];
  44. };
  45. export default genMotionStyle;