motion.js 1.2 KB

1234567891011121314151617181920212223242526272829303132333435
  1. const initMotionCommon = duration => ({
  2. animationDuration: duration,
  3. animationFillMode: 'both'
  4. });
  5. // FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
  6. const initMotionCommonLeave = duration => ({
  7. animationDuration: duration,
  8. animationFillMode: 'both'
  9. });
  10. export const initMotion = (motionCls, inKeyframes, outKeyframes, duration, sameLevel = false) => {
  11. const sameLevelPrefix = sameLevel ? '&' : '';
  12. return {
  13. [`
  14. ${sameLevelPrefix}${motionCls}-enter,
  15. ${sameLevelPrefix}${motionCls}-appear
  16. `]: Object.assign(Object.assign({}, initMotionCommon(duration)), {
  17. animationPlayState: 'paused'
  18. }),
  19. [`${sameLevelPrefix}${motionCls}-leave`]: Object.assign(Object.assign({}, initMotionCommonLeave(duration)), {
  20. animationPlayState: 'paused'
  21. }),
  22. [`
  23. ${sameLevelPrefix}${motionCls}-enter${motionCls}-enter-active,
  24. ${sameLevelPrefix}${motionCls}-appear${motionCls}-appear-active
  25. `]: {
  26. animationName: inKeyframes,
  27. animationPlayState: 'running'
  28. },
  29. [`${sameLevelPrefix}${motionCls}-leave${motionCls}-leave-active`]: {
  30. animationName: outKeyframes,
  31. animationPlayState: 'running',
  32. pointerEvents: 'none'
  33. }
  34. };
  35. };