motion.js 1.1 KB

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